<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>政务管理系统</title>
    <script>
        // 页面加载时立即检查登录状态
        (function() {
            const isLoggedIn = localStorage.getItem('isLoggedIn');
            const currentUser = localStorage.getItem('currentUser');
            
            if (isLoggedIn !== 'true' || !currentUser) {
                // 未登录，跳转到登录页面
                window.location.href = 'login.html';
            }
        })();
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            overflow-x: hidden;
            min-height: 100vh;
        }

        .container {
            display: flex;
            min-height: 100vh;
        }

        /* 左侧侧边栏 */
        .sidebar {
            width: 280px;
            background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 50%, #3b82f6 100%);
            color: white;
            padding: 0;
            box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            backdrop-filter: blur(10px);
        }

        .sidebar-header {
            padding: 30px 20px;
            background: rgba(255, 255, 255, 0.1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }

        .sidebar-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .sidebar-title {
            font-size: 22px;
            font-weight: bold;
            text-align: center;
            position: relative;
            z-index: 1;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .nav-menu {
            list-style: none;
            padding: 0 15px;
        }

        .nav-item {
            margin-bottom: 8px;
        }

        .nav-link {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            color: white;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 12px;
            border-left: 4px solid transparent;
            position: relative;
            overflow: hidden;
        } 
 
        .nav-link::before { 
            content: ''; 
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .nav-link:hover::before {
            left: 100%;
        }

        .nav-link:hover {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
            border-left-color: #60a5fa;
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .nav-link.active {
            background: linear-gradient(135deg, #60a5fa, #3b82f6);
            border-left-color: #ffffff;
            box-shadow: 0 4px 20px rgba(96, 165, 250, 0.4);
            transform: translateX(5px);
        }

        .nav-icon {
            margin-right: 15px;
            font-size: 18px;
            transition: transform 0.3s ease;
        }

        .nav-link:hover .nav-icon {
            transform: scale(1.2);
        }

        .nav-text {
            font-size: 15px;
            font-weight: 500;
        }

        /* 右侧主内容区域 */
        .main-content {
            flex: 1;
            margin-left: 280px;
            padding: 30px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            min-height: 100vh;
        }

        .content-header {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            padding: 25px 30px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;
        }

        .content-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
            background-size: 200% 100%;
            animation: gradientMove 3s ease infinite;
        }

        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .page-title {
            font-size: 28px;
            font-weight: bold;
            background: linear-gradient(135deg, #1e3a8a, #3b82f6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 10px;
        }

        .breadcrumb {
            color: #64748b;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .breadcrumb::before {
            content: '🏠';
            font-size: 16px;
        }

        /* 页面头部用户信息样式 */
        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .header-left {
            flex: 1;
        }

        .header-right {
            display: flex;
            align-items: center;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
            background: rgba(255, 255, 255, 0.8);
            padding: 12px 20px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #3b82f6, #1e3a8a);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: white;
        }

        .user-details {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .user-name {
            font-size: 14px;
            font-weight: 600;
            color: #374151;
        }

        .user-role {
            font-size: 12px;
            color: #6b7280;
        }

        .user-actions {
            display: flex;
            align-items: center;
        }

        .btn-logout {
            padding: 8px 16px;
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-logout:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
        }

        /* 个人信息模块 */
        .personal-info-module {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .personal-info-module:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .module-header {
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
            color: white;
            padding: 20px 25px;
            font-size: 18px;
            font-weight: bold;
            position: relative;
            overflow: hidden;
        }

        .module-header::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1));
            transform: skewX(-15deg);
        }

        .module-content {
            padding: 30px;
        }

        .info-row {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .avatar-placeholder {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
            border-radius: 20px;
            margin-right: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
            font-size: 28px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .avatar-placeholder::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg);
            transition: transform 0.6s;
        }

        .avatar-placeholder:hover::before {
            transform: rotate(45deg) translate(50%, 50%);
        }

        .avatar-placeholder:hover {
            transform: scale(1.05);
        }

        .info-labels {
            flex: 1;
        }

        .info-label {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding: 10px 15px;
            background: rgba(248, 250, 252, 0.8);
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .info-label:hover {
            background: rgba(241, 245, 249, 1);
            transform: translateX(5px);
        }

        .label-text {
            width: 120px;
            font-weight: 600;
            color: #374151;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .label-text::before {
            content: '📋';
            font-size: 16px;
        }

        .label-value {
            color: #6b7280;
            font-weight: 500;
        }

        .password-input {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .password-field {
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 14px;
            width: 220px;
            transition: all 0.3s ease;
            background: white;
        }

        .password-field:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .password-icon {
            color: #3b82f6;
            cursor: pointer;
            font-size: 18px;
            padding: 8px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .password-icon:hover {
            background: rgba(59, 130, 246, 0.1);
            transform: scale(1.1);
        }

        /* 政务公告模块 */
        .announcement-module {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .announcement-module:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .announcement-header {
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
            color: white;
            padding: 20px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .announcement-header::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1));
            transform: skewX(-15deg);
        }

        .announcement-title {
            font-size: 18px;
            font-weight: bold;
            position: relative;
            z-index: 1;
        }

        .announcement-date {
            font-size: 14px;
            opacity: 0.9;
            position: relative;
            z-index: 1;
        }

        .search-section {
            padding: 25px;
            border-bottom: 1px solid #e5e7eb;
            background: rgba(248, 250, 252, 0.5);
        }

        .search-box {
            position: relative;
            max-width: 450px;
        }

        .search-input {
            width: 100%;
            padding: 15px 50px 15px 20px;
            border: 2px solid #e5e7eb;
            border-radius: 15px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: white;
        }

        .search-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .search-icon {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            font-size: 18px;
        }

        .tab-section {
            padding: 0 25px;
            border-bottom: 1px solid #e5e7eb;
            background: white;
        }

        .tab-list {
            display: flex;
            list-style: none;
            gap: 0;
        }

        .tab-item {
            padding: 15px 25px;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
            font-size: 14px;
            font-weight: 500;
            position: relative;
            overflow: hidden;
        }

        .tab-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
            transition: left 0.5s;
        }

        .tab-item:hover::before {
            left: 100%;
        }

        .tab-item.active {
            color: #1e3a8a;
            border-bottom-color: #3b82f6;
            background: linear-gradient(135deg, #eff6ff, #f8fafc);
            font-weight: 600;
        }

        .tab-item:hover {
            background: rgba(241, 245, 249, 0.8);
            color: #1e3a8a;
        }

        .announcement-list {
            padding: 25px;
            background: white;
        }

        .announcement-item {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #f3f4f6;
            transition: all 0.3s ease;
            border-radius: 10px;
            margin-bottom: 5px;
        }

        .announcement-item:hover {
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .announcement-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

        .announcement-bullet {
            color: #3b82f6;
            margin-right: 15px;
            font-weight: bold;
            font-size: 18px;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .announcement-content {
            flex: 1;
            font-size: 14px;
            color: #374151;
            font-weight: 500;
        }

        .announcement-date-item {
            color: #9ca3af;
            font-size: 12px;
            margin-left: 15px;
            padding: 4px 8px;
            background: rgba(156, 163, 175, 0.1);
            border-radius: 6px;
        }

        /* 主页模块 */
        .homepage-module {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .homepage-module:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .module-header {
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
            color: white;
            padding: 20px 25px;
            font-size: 18px;
            font-weight: bold;
            position: relative;
            overflow: hidden;
        }

        .module-header::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1));
            transform: skewX(-15deg);
        }

        .module-content {
            padding: 30px;
        }

        .quick-stats-section {
            margin-bottom: 30px;
        }

        .section-subtitle {
            font-size: 18px;
            font-weight: bold;
            color: #1e3a8a;
            margin-bottom: 20px;
            padding-left: 10px;
            border-left: 4px solid #3b82f6;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
        }

        .stat-card {
            background: linear-gradient(135deg, #eff6ff, #f8fafc);
            border-radius: 15px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
        }

        .stat-icon {
            font-size: 36px;
            color: #3b82f6;
        }

        .stat-info {
            flex: 1;
        }

        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #1e3a8a;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 14px;
            color: #6b7280;
        }

        .quick-actions-section {
            margin-bottom: 30px;
        }

        .actions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
        }

        .action-card {
            background: linear-gradient(135deg, #eff6ff, #f8fafc);
            border-radius: 15px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            text-align: center;
        }

        .action-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
        }

        .action-icon {
            font-size: 36px;
            color: #3b82f6;
        }

        .action-text {
            font-size: 14px;
            color: #374151;
            font-weight: 500;
        }

        .recent-activities-section {
            margin-bottom: 30px;
        }

        .activities-list {
            list-style: none;
        }

        .activity-item {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #f3f4f6;
            transition: all 0.3s ease;
        }

        .activity-item:last-child {
            border-bottom: none;
        }

        .activity-item:hover {
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            transform: translateX(5px);
        }

        .activity-icon {
            font-size: 24px;
            color: #3b82f6;
            margin-right: 15px;
        }

        .activity-content {
            flex: 1;
        }

        .activity-title {
            font-size: 15px;
            font-weight: 600;
            color: #1e3a8a;
            margin-bottom: 5px;
        }

        .activity-time {
            font-size: 12px;
            color: #9ca3af;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }

            .sidebar.open {
                transform: translateX(0);
            }

            .main-content {
                margin-left: 0;
                padding: 20px;
            }

            .info-row {
                flex-direction: column;
                align-items: flex-start;
            }

            .avatar-placeholder {
                margin-right: 0;
                margin-bottom: 20px;
            }

            .tab-list {
                flex-wrap: wrap;
            }

            .tab-item {
                flex: 1;
                min-width: 120px;
                text-align: center;
            }
        }

        /* 移动端菜单按钮 */
        .mobile-menu-btn {
            display: none;
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1000;
            background: linear-gradient(135deg, #1e3a8a, #3b82f6);
            color: white;
            border: none;
            padding: 12px 15px;
            border-radius: 10px;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        .mobile-menu-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        @media (max-width: 768px) {
            .mobile-menu-btn {
                display: block;
            }
        }

        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #3b82f6, #1e3a8a);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #60a5fa, #3b82f6);
        }

        /* 公务办理模块样式 */
        .official-business-module {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: none;
        }

        .official-business-module.active {
            display: block;
        }

        .official-business-module:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .business-tabs {
            display: flex;
            background: white;
            border-bottom: 1px solid #e5e7eb;
        }

        .business-tab {
            flex: 1;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border-bottom: 3px solid transparent;
            font-weight: 500;
            color: #6b7280;
        }

        .business-tab.active {
            color: #1e3a8a;
            border-bottom-color: #3b82f6;
            background: linear-gradient(135deg, #eff6ff, #f8fafc);
        }

        .business-tab:hover {
            background: rgba(241, 245, 249, 0.8);
            color: #1e3a8a;
        }

        .business-content {
            padding: 30px;
            display: none;
        }

        .business-content.active {
            display: block;
        }

        .form-section {
            margin-bottom: 30px;
        }

        .form-title {
            font-size: 18px;
            font-weight: bold;
            color: #1e3a8a;
            margin-bottom: 20px;
            padding-left: 10px;
            border-left: 4px solid #3b82f6;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #374151;
        }

        .form-input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: white;
        }

        .form-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .form-select {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: white;
            cursor: pointer;
        }

        .form-select:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .form-textarea {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: white;
            resize: vertical;
            min-height: 100px;
        }

        .form-textarea:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .form-actions {
            display: flex;
            gap: 15px;
            justify-content: flex-end;
            margin-top: 30px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #1e3a8a, #3b82f6);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #6b7280, #9ca3af);
            color: white;
        }

        .btn-secondary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(107, 114, 128, 0.3);
        }

        .file-upload {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .file-upload input[type=file] {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        .file-upload-label {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 16px;
            border: 2px dashed #e5e7eb;
            border-radius: 10px;
            background: #f9fafb;
            cursor: pointer;
            transition: all 0.3s ease;
            gap: 8px;
        }

        .file-upload-label:hover {
            border-color: #3b82f6;
            background: #eff6ff;
        }

        .date-time-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .status-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
        }

        .status-pending {
            background: #fef3c7;
            color: #d97706;
        }

        .status-approved {
            background: #d1fae5;
            color: #059669;
        }

        .status-rejected {
            background: #fee2e2;
            color: #dc2626;
        }

        /* 数据分析模块样式 */
        .data-analysis-module {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: none;
        }

        .data-analysis-module.active {
            display: block;
        }

        .data-analysis-module:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .data-tabs {
            display: flex;
            background: white;
            border-bottom: 1px solid #e5e7eb;
        }

        .data-tab {
            flex: 1;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border-bottom: 3px solid transparent;
            font-weight: 500;
            color: #6b7280;
        }

        .data-tab.active {
            color: #1e3a8a;
            border-bottom-color: #3b82f6;
            background: linear-gradient(135deg, #eff6ff, #f8fafc);
        }

        .data-tab:hover {
            background: rgba(241, 245, 249, 0.8);
            color: #1e3a8a;
        }

        .data-content {
            padding: 30px;
            display: none;
        }

        .data-content.active {
            display: block;
        }

        /* 数据统计样式 */
        .stats-overview {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-overview-card {
            background: linear-gradient(135deg, #eff6ff, #f8fafc);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            border-left: 4px solid #3b82f6;
        }

        .stat-overview-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
        }

        .stat-overview-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .stat-overview-title {
            font-size: 16px;
            font-weight: 600;
            color: #374151;
        }

        .stat-overview-icon {
            font-size: 24px;
            color: #3b82f6;
        }

        .stat-overview-value {
            font-size: 32px;
            font-weight: bold;
            color: #1e3a8a;
            margin-bottom: 5px;
        }

        .stat-overview-change {
            font-size: 14px;
            color: #059669;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .stat-overview-change.negative {
            color: #dc2626;
        }

        /* 图表容器 */
        .chart-container {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
            margin-bottom: 20px;
        }

        .chart-title {
            font-size: 18px;
            font-weight: bold;
            color: #1e3a8a;
            margin-bottom: 20px;
            padding-left: 10px;
            border-left: 4px solid #3b82f6;
        }

        .chart-placeholder {
            height: 300px;
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6b7280;
            font-size: 16px;
            border: 2px dashed #e5e7eb;
        }

        /* 权限设置样式 */
        .permission-section {
            margin-bottom: 30px;
        }

        .permission-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .permission-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
            border: 1px solid #e5e7eb;
            transition: all 0.3s ease;
        }

        .permission-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
        }

        .permission-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f3f4f6;
        }

        .permission-title {
            font-size: 16px;
            font-weight: 600;
            color: #374151;
        }

        .permission-toggle {
            position: relative;
            width: 50px;
            height: 24px;
            background: #e5e7eb;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .permission-toggle.active {
            background: #3b82f6;
        }

        .permission-toggle::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .permission-toggle.active::after {
            transform: translateX(26px);
        }

        .permission-list {
            list-style: none;
        }

        .permission-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #f3f4f6;
        }

        .permission-item:last-child {
            border-bottom: none;
        }

        .permission-item-label {
            font-size: 14px;
            color: #6b7280;
        }

        .permission-item-toggle {
            position: relative;
            width: 40px;
            height: 20px;
            background: #e5e7eb;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .permission-item-toggle.active {
            background: #3b82f6;
        }

        .permission-item-toggle::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            background: white;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .permission-item-toggle.active::after {
            transform: translateX(20px);
        }

        /* 数据筛选器 */
        .filter-section {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
            margin-bottom: 20px;
        }

        .filter-title {
            font-size: 16px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 15px;
        }

        .filter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
        }

        .filter-label {
            font-size: 14px;
            font-weight: 500;
            color: #6b7280;
            margin-bottom: 8px;
        }

        .filter-input {
            padding: 10px 12px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .filter-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .filter-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .btn-filter {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-filter-primary {
            background: linear-gradient(135deg, #1e3a8a, #3b82f6);
            color: white;
        }

        .btn-filter-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(59, 130, 246, 0.3);
        }

        .btn-filter-secondary {
            background: #f3f4f6;
            color: #6b7280;
        }

        .btn-filter-secondary:hover {
            background: #e5e7eb;
        }

        /* 单位组织模块样式 */
        .organization-module {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: none;
        }

        .organization-module.active {
            display: block;
        }

        .organization-module:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .organization-tabs {
            display: flex;
            background: white;
            border-bottom: 1px solid #e5e7eb;
        }

        .organization-tab {
            flex: 1;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border-bottom: 3px solid transparent;
            font-weight: 500;
            color: #6b7280;
        }

        .organization-tab.active {
            color: #1e3a8a;
            border-bottom-color: #3b82f6;
            background: linear-gradient(135deg, #eff6ff, #f8fafc);
        }

        .organization-tab:hover {
            background: rgba(241, 245, 249, 0.8);
            color: #1e3a8a;
        }

        .organization-content {
            padding: 30px;
            display: none;
        }

        .organization-content.active {
            display: block;
        }

        /* 单位管理样式 */
        .unit-management-section {
            margin-bottom: 30px;
        }

        .unit-actions {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .btn-unit {
            padding: 12px 20px;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn-unit-primary {
            background: linear-gradient(135deg, #1e3a8a, #3b82f6);
            color: white;
        }

        .btn-unit-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
        }

        .btn-unit-secondary {
            background: linear-gradient(135deg, #6b7280, #9ca3af);
            color: white;
        }

        .btn-unit-secondary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(107, 114, 128, 0.3);
        }

        .btn-unit-success {
            background: linear-gradient(135deg, #059669, #10b981);
            color: white;
        }

        .btn-unit-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(5, 150, 105, 0.3);
        }

        .btn-unit-warning {
            background: linear-gradient(135deg, #d97706, #f59e0b);
            color: white;
        }

        .btn-unit-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(217, 119, 6, 0.3);
        }

        .unit-table-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .unit-table {
            width: 100%;
            border-collapse: collapse;
        }

        .unit-table th {
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            padding: 15px 20px;
            text-align: left;
            font-weight: 600;
            color: #374151;
            border-bottom: 2px solid #e5e7eb;
        }

        .unit-table td {
            padding: 15px 20px;
            border-bottom: 1px solid #f3f4f6;
            color: #6b7280;
        }

        .unit-table tr:hover {
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
        }

        .unit-status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
        }

        .unit-status-active {
            background: #d1fae5;
            color: #059669;
        }

        .unit-status-inactive {
            background: #fee2e2;
            color: #dc2626;
        }

        .unit-actions-cell {
            display: flex;
            gap: 8px;
        }

        .btn-action {
            padding: 6px 12px;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-action-edit {
            background: #3b82f6;
            color: white;
        }

        .btn-action-edit:hover {
            background: #2563eb;
        }

        .btn-action-delete {
            background: #ef4444;
            color: white;
        }

        .btn-action-delete:hover {
            background: #dc2626;
        }

        .btn-action-view {
            background: #10b981;
            color: white;
        }

        .btn-action-view:hover {
            background: #059669;
        }

        /* 用户管理样式 */
        .user-management-section {
            margin-bottom: 30px;
        }

        .user-subtabs {
            display: flex;
            background: #f8fafc;
            border-radius: 10px;
            padding: 5px;
            margin-bottom: 25px;
        }

        .user-subtab {
            flex: 1;
            padding: 12px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 8px;
            font-weight: 500;
            color: #6b7280;
        }

        .user-subtab.active {
            color: #1e3a8a;
            background: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .user-subtab:hover {
            color: #1e3a8a;
        }

        .user-content {
            display: none;
        }

        .user-content.active {
            display: block;
        }

        .user-search-section {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
            margin-bottom: 20px;
        }

        .user-search-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .user-search-group {
            display: flex;
            flex-direction: column;
        }

        .user-search-label {
            font-size: 14px;
            font-weight: 500;
            color: #6b7280;
            margin-bottom: 8px;
        }

        .user-search-input {
            padding: 10px 12px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .user-search-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .user-table-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .user-table {
            width: 100%;
            border-collapse: collapse;
        }

        .user-table th {
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            padding: 15px 20px;
            text-align: left;
            font-weight: 600;
            color: #374151;
            border-bottom: 2px solid #e5e7eb;
        }

        .user-table td {
            padding: 15px 20px;
            border-bottom: 1px solid #f3f4f6;
            color: #6b7280;
        }

        .user-table tr:hover {
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3b82f6, #1e3a8a);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 16px;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .user-name {
            font-weight: 600;
            color: #374151;
        }

        .user-email {
            font-size: 12px;
            color: #9ca3af;
        }

        .user-role {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
        }

        .user-role-admin {
            background: #fef3c7;
            color: #d97706;
        }

        .user-role-manager {
            background: #dbeafe;
            color: #2563eb;
        }

        .user-role-user {
            background: #d1fae5;
            color: #059669;
        }

        .user-status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
        }

        .user-status-online {
            background: #d1fae5;
            color: #059669;
        }

        .user-status-offline {
            background: #fee2e2;
            color: #dc2626;
        }

        .user-status-away {
            background: #fef3c7;
            color: #d97706;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
        }

        .modal-content {
            background: white;
            margin: 5% auto;
            padding: 0;
            border-radius: 20px;
            width: 90%;
            max-width: 600px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
            animation: modalSlideIn 0.3s ease;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .modal-header {
            background: linear-gradient(135deg, #1e3a8a, #3b82f6);
            color: white;
            padding: 20px 25px;
            border-radius: 20px 20px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 18px;
            font-weight: bold;
        }

        .modal-close {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .modal-close:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .modal-body {
            padding: 25px;
        }

        .modal-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .modal-form-group {
            display: flex;
            flex-direction: column;
        }

        .modal-form-label {
            font-size: 14px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 8px;
        }

        .modal-form-input {
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .modal-form-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .modal-form-select {
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: white;
            cursor: pointer;
        }

        .modal-form-select:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .modal-form-textarea {
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 14px;
            transition: all 0.3s ease;
            resize: vertical;
            min-height: 100px;
        }

        .modal-form-textarea:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .modal-footer {
            padding: 20px 25px;
            border-top: 1px solid #e5e7eb;
            display: flex;
            justify-content: flex-end;
            gap: 15px;
        }

        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-top: 25px;
        }

        .pagination-btn {
            padding: 8px 12px;
            border: 1px solid #e5e7eb;
            background: white;
            color: #6b7280;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .pagination-btn:hover {
            background: #f8fafc;
            color: #374151;
        }

        .pagination-btn.active {
            background: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }

        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* 系统管理模块样式 */
        .system-management-module {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: none;
        }

        .system-management-module.active {
            display: block;
        }

        .system-management-module:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .system-tabs {
            display: flex;
            background: white;
            border-bottom: 1px solid #e5e7eb;
        }

        .system-tab {
            flex: 1;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border-bottom: 3px solid transparent;
            font-weight: 500;
            color: #6b7280;
        }

        .system-tab.active {
            color: #1e3a8a;
            border-bottom-color: #3b82f6;
            background: linear-gradient(135deg, #eff6ff, #f8fafc);
        }

        .system-tab:hover {
            background: rgba(241, 245, 249, 0.8);
            color: #1e3a8a;
        }

        .system-content {
            padding: 30px;
            display: none;
        }

        .system-content.active {
            display: block;
        }

        .system-management-section {
            margin-bottom: 30px;
        }

        .system-actions {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .btn-system {
            padding: 12px 20px;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn-system-primary {
            background: linear-gradient(135deg, #1e3a8a, #3b82f6);
            color: white;
        }

        .btn-system-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
        }

        .btn-system-secondary {
            background: linear-gradient(135deg, #6b7280, #9ca3af);
            color: white;
        }

        .btn-system-secondary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(107, 114, 128, 0.3);
        }

        .btn-system-success {
            background: linear-gradient(135deg, #059669, #10b981);
            color: white;
        }

        .btn-system-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(5, 150, 105, 0.3);
        }

        .btn-system-warning {
            background: linear-gradient(135deg, #d97706, #f59e0b);
            color: white;
        }

        .btn-system-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(217, 119, 6, 0.3);
        }

        .system-search-section {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
            margin-bottom: 20px;
        }

        .system-search-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .system-search-group {
            display: flex;
            flex-direction: column;
        }

        .system-search-label {
            font-size: 14px;
            font-weight: 500;
            color: #6b7280;
            margin-bottom: 8px;
        }

        .system-search-input {
            padding: 10px 12px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .system-search-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .system-table-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .system-table {
            width: 100%;
            border-collapse: collapse;
        }

        .system-table th {
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            padding: 15px 20px;
            text-align: left;
            font-weight: 600;
            color: #374151;
            border-bottom: 2px solid #e5e7eb;
        }

        .system-table td {
            padding: 15px 20px;
            border-bottom: 1px solid #f3f4f6;
            color: #6b7280;
        }

        .system-table tr:hover {
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
        }

        .system-user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .system-user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3b82f6, #1e3a8a);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 16px;
        }

        .system-user-name {
            font-weight: 600;
            color: #374151;
        }

        .system-user-account {
            font-size: 12px;
            color: #9ca3af;
        }

        .system-user-role {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
        }

        .system-user-role-super-admin {
            background: #fef3c7;
            color: #d97706;
        }

        .system-user-role-admin {
            background: #dbeafe;
            color: #2563eb;
        }

        .system-user-role-manager {
            background: #d1fae5;
            color: #059669;
        }

        .system-user-role-user {
            background: #f3f4f6;
            color: #6b7280;
        }

        .system-user-status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
        }

        .system-user-status-active {
            background: #d1fae5;
            color: #059669;
        }

        .system-user-status-inactive {
            background: #fee2e2;
            color: #dc2626;
        }

        .system-user-status-locked {
            background: #fef3c7;
            color: #d97706;
        }

        .system-actions-cell {
            display: flex;
            gap: 8px;
        }

        /* 角色管理样式 */
        .role-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .role-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
            border: 1px solid #e5e7eb;
            transition: all 0.3s ease;
        }

        .role-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
        }

        .role-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f3f4f6;
        }

        .role-title {
            font-size: 18px;
            font-weight: 600;
            color: #374151;
        }

        .role-actions {
            display: flex;
            gap: 8px;
        }

        .role-info {
            margin-bottom: 20px;
        }

        .role-description {
            font-size: 14px;
            color: #6b7280;
            margin-bottom: 15px;
            line-height: 1.5;
        }

        .role-stats {
            display: flex;
            gap: 15px;
        }

        .role-stat {
            font-size: 12px;
            color: #9ca3af;
            background: #f3f4f6;
            padding: 4px 8px;
            border-radius: 6px;
        }

        .role-permissions {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .permission-category {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 15px;
        }

        .permission-category-title {
            font-size: 14px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 10px;
        }

        .permission-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .permission-tag {
            background: #eff6ff;
            color: #3b82f6;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
        }

        /* 系统配置样式 */
        .config-section {
            margin-bottom: 30px;
        }

        .config-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .config-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
            border: 1px solid #e5e7eb;
            transition: all 0.3s ease;
        }

        .config-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
        }

        .config-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f3f4f6;
        }

        .config-title {
            font-size: 16px;
            font-weight: 600;
            color: #374151;
        }

        .config-content {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .config-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
        }

        .config-label {
            font-size: 14px;
            color: #6b7280;
            font-weight: 500;
        }

        .config-value {
            font-size: 14px;
            color: #374151;
            font-weight: 600;
        }

        .config-status-active {
            color: #059669;
        }

        /* 日志管理样式 */
        .log-filter-section {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
            margin-bottom: 20px;
        }

        .log-filter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .log-filter-group {
            display: flex;
            flex-direction: column;
        }

        .log-filter-label {
            font-size: 14px;
            font-weight: 500;
            color: #6b7280;
            margin-bottom: 8px;
        }

        .log-filter-input {
            padding: 10px 12px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .log-filter-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .log-table-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .log-table {
            width: 100%;
            border-collapse: collapse;
        }

        .log-table th {
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            padding: 15px 20px;
            text-align: left;
            font-weight: 600;
            color: #374151;
            border-bottom: 2px solid #e5e7eb;
        }

        .log-table td {
            padding: 15px 20px;
            border-bottom: 1px solid #f3f4f6;
            color: #6b7280;
        }

        .log-table tr:hover {
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
        }

        .log-status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
        }

        .log-status-success {
            background: #d1fae5;
            color: #059669;
        }

        .log-status-error {
            background: #fee2e2;
            color: #dc2626;
        }

        /* 隐藏其他模块 */
        .personal-info-module,
        .homepage-module,
        .announcement-module {
            display: block;
        }

        .personal-info-module.hidden,
        .homepage-module.hidden,
        .announcement-module.hidden {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 移动端菜单按钮 -->
    <button class="mobile-menu-btn" onclick="toggleSidebar()">☰</button>

    <div class="container">
        <!-- 左侧侧边栏 -->
        <nav class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-title">政务管理系统</div>
            </div>
            
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link active" onclick="switchModule('homepage')">
                        <span class="nav-icon">🏠</span>
                        <span class="nav-text">主页</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" onclick="switchModule('official-business')">
                        <span class="nav-icon">⚡</span>
                        <span class="nav-text">公务办理</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" onclick="switchModule('data-analysis')">
                        <span class="nav-icon">📊</span>
                        <span class="nav-text">数据分析</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" onclick="switchModule('organization')">
                        <span class="nav-icon">⚡</span>
                        <span class="nav-text">单位组织</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" onclick="switchModule('system-management')">
                        <span class="nav-icon">⚙️</span>
                        <span class="nav-text">系统管理</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" onclick="openActivityManagement()">
                        <span class="nav-icon">🎯</span>
                        <span class="nav-text">活动管理</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" onclick="openVolunteerManagement()">
                        <span class="nav-icon">🤝</span>
                        <span class="nav-text">志愿者管理</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" onclick="openDataDashboard()">
                        <span class="nav-icon">📈</span>
                        <span class="nav-text">数据大屏</span>
                    </a>
                </li>

            </ul>
        </nav>

        <!-- 右侧主内容区域 -->
        <main class="main-content">
            <div class="content-header">
                <div class="header-top">
                    <div class="header-left">
                        <h1 class="page-title">系统首页</h1>
                        <div class="breadcrumb">首页 > 主页</div>
                    </div>
                    <div class="header-right">
                        <div class="user-info">
                            <div class="user-avatar">👤</div>
                            <div class="user-details">
                                <div class="user-name" id="current-user-name">加载中...</div>
                                <div class="user-role" id="current-user-role">用户</div>
                            </div>
                            <div class="user-actions">
                                <button class="btn-logout" onclick="logout()">退出登录</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 个人信息模块 -->
            <div class="personal-info-module">
                <div class="module-header">个人信息</div>
                <div class="module-content">
                    <div class="info-row">
                        <div class="avatar-placeholder">头像</div>
                        <div class="info-labels">
                            <div class="info-label">
                                <span class="label-text">姓名:</span>
                                <span class="label-value">张三</span>
                            </div>
                            <div class="info-label">
                                <span class="label-text">年龄:</span>
                                <span class="label-value">35岁</span>
                            </div>
                            <div class="info-label">
                                <span class="label-text">身份证号:</span>
                                <span class="label-value">110101198801011234</span>
                            </div>
                            <div class="info-label">
                                <span class="label-text">二级密码:</span>
                                <div class="password-input">
                                    <input type="password" class="password-field" placeholder="请输入二级密码">
                                    <span class="password-icon">⚡</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 主页模块 -->
            <div class="homepage-module">
                <div class="module-header">主页概览</div>
                <div class="module-content">
                    <!-- 快速统计 -->
                    <div class="quick-stats-section">
                        <h3 class="section-subtitle">📊 快速统计</h3>
                        <div class="stats-grid">
                            <div class="stat-card">
                                <div class="stat-icon">📋</div>
                                <div class="stat-info">
                                    <div class="stat-number">156</div>
                                    <div class="stat-label">待处理公务</div>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">📢</div>
                                <div class="stat-info">
                                    <div class="stat-number">89</div>
                                    <div class="stat-label">今日公告</div>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">👥</div>
                                <div class="stat-info">
                                    <div class="stat-number">1,234</div>
                                    <div class="stat-label">总用户数</div>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">⚡</div>
                                <div class="stat-info">
                                    <div class="stat-number">98.5%</div>
                                    <div class="stat-label">系统运行率</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 快捷操作 -->
                    <div class="quick-actions-section">
                        <h3 class="section-subtitle">🚀 快捷操作</h3>
                        <div class="actions-grid">
                            <div class="action-card" onclick="quickAction('new-announcement')">
                                <div class="action-icon">📝</div>
                                <div class="action-text">发布公告</div>
                            </div>
                            <div class="action-card" onclick="quickAction('approve')">
                                <div class="action-icon">✅</div>
                                <div class="action-text">审批公务</div>
                            </div>
                            <div class="action-card" onclick="quickAction('report')">
                                <div class="action-icon">📊</div>
                                <div class="action-text">生成报表</div>
                            </div>
                            <div class="action-card" onclick="quickAction('settings')">
                                <div class="action-icon">⚙️</div>
                                <div class="action-text">系统设置</div>
                            </div>
                        </div>
                    </div>

                    <!-- 最近活动 -->
                    <div class="recent-activities-section">
                        <h3 class="section-subtitle">🕒 最近活动</h3>
                        <div class="activities-list">
                            <div class="activity-item">
                                <div class="activity-icon">📋</div>
                                <div class="activity-content">
                                    <div class="activity-title">审批了公务申请 #2024001</div>
                                    <div class="activity-time">2小时前</div>
                                </div>
                            </div>
                            <div class="activity-item">
                                <div class="activity-icon">📢</div>
                                <div class="activity-content">
                                    <div class="activity-title">发布了新公告</div>
                                    <div class="activity-time">4小时前</div>
                                </div>
                            </div>
                            <div class="activity-item">
                                <div class="activity-icon">👥</div>
                                <div class="activity-content">
                                    <div class="activity-title">更新了用户权限</div>
                                    <div class="activity-time">1天前</div>
                                </div>
                            </div>
                            <div class="activity-item">
                                <div class="activity-icon">📊</div>
                                <div class="activity-content">
                                    <div class="activity-title">生成了月度报表</div>
                                    <div class="activity-time">2天前</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 政务公告模块 -->
            <div class="announcement-module">
                <div class="announcement-header">
                    <span class="announcement-title">政务公告</span>
                    <span class="announcement-date">2023年11月10日</span>
                </div>
                
                <div class="search-section">
                    <div class="search-box">
                        <input type="text" class="search-input" placeholder="请输入关键词">
                        <span class="search-icon">🔍</span>
                    </div>
                </div>

                <div class="tab-section">
                    <ul class="tab-list">
                        <li class="tab-item active" onclick="switchTab('all')">全部公告</li>
                        <li class="tab-item" onclick="switchTab('notification')">通知公告</li>
                        <li class="tab-item" onclick="switchTab('policy')">政策法规</li>
                        <li class="tab-item" onclick="switchTab('work')">工作动态</li>
                        <li class="tab-item" onclick="switchTab('other')">其他</li>
                    </ul>
                </div>

                <div class="announcement-list">
                    <div class="announcement-item">
                        <span class="announcement-bullet">•</span>
                        <span class="announcement-content">关于2023年城乡居民基本医疗保险参保缴费的通知</span>
                        <span class="announcement-date-item">2023-11-10</span>
                    </div>
                    <div class="announcement-item">
                        <span class="announcement-bullet">•</span>
                        <span class="announcement-content">关于开展2023年度绩效考核的通知公告</span>
                        <span class="announcement-date-item">2023-11-08</span>
                    </div>
                    <div class="announcement-item">
                        <span class="announcement-bullet">•</span>
                        <span class="announcement-content">关于印发部分公安局规章制度的通知</span>
                        <span class="announcement-date-item">2023-11-06</span>
                    </div>
                    <div class="announcement-item">
                        <span class="announcement-bullet">•</span>
                        <span class="announcement-content">2023年第三季度绩效考核公开工作情况的通报</span>
                        <span class="announcement-date-item">2023-11-08</span>
                    </div>
                    <div class="announcement-item">
                        <span class="announcement-bullet">•</span>
                        <span class="announcement-content">关于印发2023年政务公开工作要点的通知</span>
                        <span class="announcement-date-item">2023-10-10</span>
                    </div>
                </div>
            </div>

            <!-- 公务办理模块 -->
            <div class="official-business-module" id="official-business-module">
                <div class="module-header">公务办理</div>
                <div class="module-content">
                    <div class="business-tabs">
                        <div class="business-tab" onclick="switchBusinessTab('leave-application')">请假申请</div>
                        <div class="business-tab" onclick="switchBusinessTab('travel-application')">出差申请</div>
                    </div>
                    <div class="business-content active" id="leave-application-content">
                        <div class="form-section">
                            <h3 class="form-title">请假申请表</h3>
                            <div class="form-grid">
                                <div class="form-group">
                                    <label for="leave-type">请假类型:</label>
                                    <select id="leave-type" class="form-select">
                                        <option value="年假">年假</option>
                                        <option value="病假">病假</option>
                                        <option value="事假">事假</option>
                                        <option value="调休">调休</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="leave-start-date">请假开始日期:</label>
                                    <input type="date" id="leave-start-date" class="form-input">
                                </div>
                                <div class="form-group">
                                    <label for="leave-end-date">请假结束日期:</label>
                                    <input type="date" id="leave-end-date" class="form-input">
                                </div>
                                <div class="form-group">
                                    <label for="leave-reason">请假原因:</label>
                                    <textarea id="leave-reason" class="form-textarea"></textarea>
                                </div>
                                                                 <div class="form-group">
                                     <label for="leave-attachment">附件:</label>
                                     <div class="file-upload">
                                         <input type="file" id="leave-attachment">
                                         <label for="leave-attachment" class="file-upload-label">
                                             📎 选择文件
                                         </label>
                                     </div>
                                 </div>
                            </div>
                            <div class="form-actions">
                                <button class="btn btn-secondary" onclick="closeBusinessModule()">取消</button>
                                <button class="btn btn-primary" onclick="submitLeaveApplication()">提交申请</button>
                            </div>
                        </div>
                    </div>
                    <div class="business-content" id="travel-application-content">
                        <div class="form-section">
                            <h3 class="form-title">出差申请表</h3>
                            <div class="form-grid">
                                <div class="form-group">
                                    <label for="travel-destination">目的地:</label>
                                    <input type="text" id="travel-destination" class="form-input">
                                </div>
                                <div class="form-group">
                                    <label for="travel-start-date">出差开始日期:</label>
                                    <input type="date" id="travel-start-date" class="form-input">
                                </div>
                                <div class="form-group">
                                    <label for="travel-end-date">出差结束日期:</label>
                                    <input type="date" id="travel-end-date" class="form-input">
                                </div>
                                <div class="form-group">
                                    <label for="travel-purpose">出差目的:</label>
                                    <textarea id="travel-purpose" class="form-textarea"></textarea>
                                </div>
                                                                 <div class="form-group">
                                     <label for="travel-attachment">附件:</label>
                                     <div class="file-upload">
                                         <input type="file" id="travel-attachment">
                                         <label for="travel-attachment" class="file-upload-label">
                                             📎 选择文件
                                         </label>
                                     </div>
                                 </div>
                            </div>
                            <div class="form-actions">
                                <button class="btn btn-secondary" onclick="closeBusinessModule()">取消</button>
                                <button class="btn btn-primary" onclick="submitTravelApplication()">提交申请</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 单位组织模块 -->
            <div class="organization-module" id="organization-module">
                <div class="module-header">单位组织管理</div>
                <div class="module-content">
                    <div class="organization-tabs">
                        <div class="organization-tab active" onclick="switchOrganizationTab('unit-management')">单位管理</div>
                        <div class="organization-tab" onclick="switchOrganizationTab('user-management')">用户管理</div>
                    </div>
                    
                    <!-- 单位管理内容 -->
                    <div class="organization-content active" id="unit-management-content">
                        <div class="unit-management-section">
                            <div class="unit-actions">
                                <button class="btn-unit btn-unit-primary" onclick="openUnitModal('add')">
                                    <span>➕</span>
                                    新增单位
                                </button>
                                <button class="btn-unit btn-unit-secondary" onclick="exportUnitData()">
                                    <span>📊</span>
                                    导出数据
                                </button>
                                <button class="btn-unit btn-unit-success" onclick="batchImportUnits()">
                                    <span>📥</span>
                                    批量导入
                                </button>
                                <button class="btn-unit btn-unit-warning" onclick="unitStatistics()">
                                    <span>📈</span>
                                    单位统计
                                </button>
                            </div>

                            <div class="unit-table-container">
                                <table class="unit-table">
                                    <thead>
                                        <tr>
                                            <th>单位名称</th>
                                            <th>单位代码</th>
                                            <th>上级单位</th>
                                            <th>单位类型</th>
                                            <th>负责人</th>
                                            <th>联系电话</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>市政府办公厅</td>
                                            <td>GOV001</td>
                                            <td>-</td>
                                            <td>行政机关</td>
                                            <td>张主任</td>
                                            <td>010-12345678</td>
                                            <td><span class="unit-status unit-status-active">正常</span></td>
                                            <td class="unit-actions-cell">
                                                <button class="btn-action btn-action-view" onclick="viewUnit(1)">查看</button>
                                                <button class="btn-action btn-action-edit" onclick="editUnit(1)">编辑</button>
                                                <button class="btn-action btn-action-delete" onclick="deleteUnit(1)">删除</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>市发展和改革委员会</td>
                                            <td>GOV002</td>
                                            <td>市政府办公厅</td>
                                            <td>行政机关</td>
                                            <td>李主任</td>
                                            <td>010-12345679</td>
                                            <td><span class="unit-status unit-status-active">正常</span></td>
                                            <td class="unit-actions-cell">
                                                <button class="btn-action btn-action-view" onclick="viewUnit(2)">查看</button>
                                                <button class="btn-action btn-action-edit" onclick="editUnit(2)">编辑</button>
                                                <button class="btn-action btn-action-delete" onclick="deleteUnit(2)">删除</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>市教育局</td>
                                            <td>GOV003</td>
                                            <td>市政府办公厅</td>
                                            <td>行政机关</td>
                                            <td>王局长</td>
                                            <td>010-12345680</td>
                                            <td><span class="unit-status unit-status-active">正常</span></td>
                                            <td class="unit-actions-cell">
                                                <button class="btn-action btn-action-view" onclick="viewUnit(3)">查看</button>
                                                <button class="btn-action btn-action-edit" onclick="editUnit(3)">编辑</button>
                                                <button class="btn-action btn-action-delete" onclick="deleteUnit(3)">删除</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>市财政局</td>
                                            <td>GOV004</td>
                                            <td>市政府办公厅</td>
                                            <td>行政机关</td>
                                            <td>赵局长</td>
                                            <td>010-12345681</td>
                                            <td><span class="unit-status unit-status-inactive">停用</span></td>
                                            <td class="unit-actions-cell">
                                                <button class="btn-action btn-action-view" onclick="viewUnit(4)">查看</button>
                                                <button class="btn-action btn-action-edit" onclick="editUnit(4)">编辑</button>
                                                <button class="btn-action btn-action-delete" onclick="deleteUnit(4)">删除</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- 分页 -->
                            <div class="pagination">
                                <button class="pagination-btn" disabled>上一页</button>
                                <button class="pagination-btn active">1</button>
                                <button class="pagination-btn">2</button>
                                <button class="pagination-btn">3</button>
                                <button class="pagination-btn">下一页</button>
                            </div>
                        </div>
                    </div>

                    <!-- 用户管理内容 -->
                    <div class="organization-content" id="user-management-content">
                        <div class="user-management-section">
                            <div class="user-subtabs">
                                <div class="user-subtab active" onclick="switchUserTab('main-unit-users')">主单位人员管理</div>
                                <div class="user-subtab" onclick="switchUserTab('subsidiary-unit-users')">附属单位人员管理</div>
                            </div>

                            <!-- 主单位人员管理 -->
                            <div class="user-content active" id="main-unit-users-content">
                                <div class="user-search-section">
                                    <div class="user-search-grid">
                                        <div class="user-search-group">
                                            <label class="user-search-label">姓名</label>
                                            <input type="text" class="user-search-input" placeholder="请输入姓名">
                                        </div>
                                        <div class="user-search-group">
                                            <label class="user-search-label">部门</label>
                                            <select class="user-search-input">
                                                <option value="">全部部门</option>
                                                <option value="gov001">市政府办公厅</option>
                                                <option value="gov002">市发展和改革委员会</option>
                                                <option value="gov003">市教育局</option>
                                                <option value="gov004">市财政局</option>
                                            </select>
                                        </div>
                                        <div class="user-search-group">
                                            <label class="user-search-label">角色</label>
                                            <select class="user-search-input">
                                                <option value="">全部角色</option>
                                                <option value="admin">管理员</option>
                                                <option value="manager">部门主管</option>
                                                <option value="user">普通用户</option>
                                            </select>
                                        </div>
                                        <div class="user-search-group">
                                            <label class="user-search-label">状态</label>
                                            <select class="user-search-input">
                                                <option value="">全部状态</option>
                                                <option value="online">在线</option>
                                                <option value="offline">离线</option>
                                                <option value="away">离开</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="unit-actions">
                                        <button class="btn-unit btn-unit-primary" onclick="openUserModal('add')">
                                            <span>➕</span>
                                            新增用户
                                        </button>
                                        <button class="btn-unit btn-unit-secondary" onclick="searchUsers()">
                                            <span>🔍</span>
                                            搜索
                                        </button>
                                        <button class="btn-unit btn-unit-success" onclick="resetUserSearch()">
                                            <span>🔄</span>
                                            重置
                                        </button>
                                    </div>
                                </div>

                                <div class="user-table-container">
                                    <table class="user-table">
                                        <thead>
                                            <tr>
                                                <th>用户信息</th>
                                                <th>部门</th>
                                                <th>角色</th>
                                                <th>联系电话</th>
                                                <th>状态</th>
                                                <th>最后登录</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="user-info">
                                                        <div class="user-avatar">张</div>
                                                        <div>
                                                            <div class="user-name">张三</div>
                                                            <div class="user-email">zhangsan@gov.cn</div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>市政府办公厅</td>
                                                <td><span class="user-role user-role-admin">管理员</span></td>
                                                <td>138****1234</td>
                                                <td><span class="user-status user-status-online">在线</span></td>
                                                <td>2024-01-15 14:30</td>
                                                <td class="unit-actions-cell">
                                                    <button class="btn-action btn-action-view" onclick="viewUser(1)">查看</button>
                                                    <button class="btn-action btn-action-edit" onclick="editUser(1)">编辑</button>
                                                    <button class="btn-action btn-action-delete" onclick="deleteUser(1)">删除</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="user-info">
                                                        <div class="user-avatar">李</div>
                                                        <div>
                                                            <div class="user-name">李四</div>
                                                            <div class="user-email">lisi@gov.cn</div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>市发展和改革委员会</td>
                                                <td><span class="user-role user-role-manager">部门主管</span></td>
                                                <td>139****5678</td>
                                                <td><span class="user-status user-status-away">离开</span></td>
                                                <td>2024-01-15 13:45</td>
                                                <td class="unit-actions-cell">
                                                    <button class="btn-action btn-action-view" onclick="viewUser(2)">查看</button>
                                                    <button class="btn-action btn-action-edit" onclick="editUser(2)">编辑</button>
                                                    <button class="btn-action btn-action-delete" onclick="deleteUser(2)">删除</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="user-info">
                                                        <div class="user-avatar">王</div>
                                                        <div>
                                                            <div class="user-name">王五</div>
                                                            <div class="user-email">wangwu@gov.cn</div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>市教育局</td>
                                                <td><span class="user-role user-role-user">普通用户</span></td>
                                                <td>137****9012</td>
                                                <td><span class="user-status user-status-offline">离线</span></td>
                                                <td>2024-01-15 12:20</td>
                                                <td class="unit-actions-cell">
                                                    <button class="btn-action btn-action-view" onclick="viewUser(3)">查看</button>
                                                    <button class="btn-action btn-action-edit" onclick="editUser(3)">编辑</button>
                                                    <button class="btn-action btn-action-delete" onclick="deleteUser(3)">删除</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <!-- 附属单位人员管理 -->
                            <div class="user-content" id="subsidiary-unit-users-content">
                                <div class="user-search-section">
                                    <div class="user-search-grid">
                                        <div class="user-search-group">
                                            <label class="user-search-label">姓名</label>
                                            <input type="text" class="user-search-input" placeholder="请输入姓名">
                                        </div>
                                        <div class="user-search-group">
                                            <label class="user-search-label">附属单位</label>
                                            <select class="user-search-input">
                                                <option value="">全部附属单位</option>
                                                <option value="sub001">市第一中学</option>
                                                <option value="sub002">市人民医院</option>
                                                <option value="sub003">市图书馆</option>
                                                <option value="sub004">市博物馆</option>
                                            </select>
                                        </div>
                                        <div class="user-search-group">
                                            <label class="user-search-label">职位</label>
                                            <select class="user-search-input">
                                                <option value="">全部职位</option>
                                                <option value="teacher">教师</option>
                                                <option value="doctor">医生</option>
                                                <option value="librarian">图书管理员</option>
                                                <option value="curator">馆长</option>
                                            </select>
                                        </div>
                                        <div class="user-search-group">
                                            <label class="user-search-label">状态</label>
                                            <select class="user-search-input">
                                                <option value="">全部状态</option>
                                                <option value="active">在职</option>
                                                <option value="inactive">离职</option>
                                                <option value="suspended">停职</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="unit-actions">
                                        <button class="btn-unit btn-unit-primary" onclick="openSubsidiaryUserModal('add')">
                                            <span>➕</span>
                                            新增附属单位人员
                                        </button>
                                        <button class="btn-unit btn-unit-secondary" onclick="searchSubsidiaryUsers()">
                                            <span>🔍</span>
                                            搜索
                                        </button>
                                        <button class="btn-unit btn-unit-success" onclick="resetSubsidiaryUserSearch()">
                                            <span>🔄</span>
                                            重置
                                        </button>
                                    </div>
                                </div>

                                <div class="user-table-container">
                                    <table class="user-table">
                                        <thead>
                                            <tr>
                                                <th>人员信息</th>
                                                <th>附属单位</th>
                                                <th>职位</th>
                                                <th>联系电话</th>
                                                <th>入职时间</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="user-info">
                                                        <div class="user-avatar">陈</div>
                                                        <div>
                                                            <div class="user-name">陈老师</div>
                                                            <div class="user-email">chenlaoshi@school.edu.cn</div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>市第一中学</td>
                                                <td>数学教师</td>
                                                <td>136****3456</td>
                                                <td>2020-09-01</td>
                                                <td><span class="user-status user-status-online">在职</span></td>
                                                <td class="unit-actions-cell">
                                                    <button class="btn-action btn-action-view" onclick="viewSubsidiaryUser(1)">查看</button>
                                                    <button class="btn-action btn-action-edit" onclick="editSubsidiaryUser(1)">编辑</button>
                                                    <button class="btn-action btn-action-delete" onclick="deleteSubsidiaryUser(1)">删除</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="user-info">
                                                        <div class="user-avatar">刘</div>
                                                        <div>
                                                            <div class="user-name">刘医生</div>
                                                            <div class="user-email">liuyisheng@hospital.com</div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>市人民医院</td>
                                                <td>内科主任</td>
                                                <td>135****7890</td>
                                                <td>2018-03-15</td>
                                                <td><span class="user-status user-status-online">在职</span></td>
                                                <td class="unit-actions-cell">
                                                    <button class="btn-action btn-action-view" onclick="viewSubsidiaryUser(2)">查看</button>
                                                    <button class="btn-action btn-action-edit" onclick="editSubsidiaryUser(2)">编辑</button>
                                                    <button class="btn-action btn-action-delete" onclick="deleteSubsidiaryUser(2)">删除</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="user-info">
                                                        <div class="user-avatar">赵</div>
                                                        <div>
                                                            <div class="user-name">赵馆长</div>
                                                            <div class="user-email">zhaoguanzhang@museum.org</div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>市博物馆</td>
                                                <td>馆长</td>
                                                <td>134****1234</td>
                                                <td>2019-06-01</td>
                                                <td><span class="user-status user-status-away">停职</span></td>
                                                <td class="unit-actions-cell">
                                                    <button class="btn-action btn-action-view" onclick="viewSubsidiaryUser(3)">查看</button>
                                                    <button class="btn-action btn-action-edit" onclick="editSubsidiaryUser(3)">编辑</button>
                                                    <button class="btn-action btn-action-delete" onclick="deleteSubsidiaryUser(3)">删除</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 数据分析模块 -->
            <div class="data-analysis-module" id="data-analysis-module">
                <div class="module-header">数据分析</div>
                <div class="module-content">
                    <div class="data-tabs">
                        <div class="data-tab active" onclick="switchDataTab('statistics')">数据统计</div>
                        <div class="data-tab" onclick="switchDataTab('permissions')">权限设置</div>
                    </div>
                    
                    <!-- 数据统计内容 -->
                    <div class="data-content active" id="statistics-content">
                        <!-- 数据筛选器 -->
                        <div class="filter-section">
                            <div class="filter-title">数据筛选</div>
                            <div class="filter-grid">
                                <div class="filter-group">
                                    <label class="filter-label">时间范围</label>
                                    <select class="filter-input">
                                        <option value="today">今日</option>
                                        <option value="week">本周</option>
                                        <option value="month" selected>本月</option>
                                        <option value="quarter">本季度</option>
                                        <option value="year">本年</option>
                                    </select>
                                </div>
                                <div class="filter-group">
                                    <label class="filter-label">部门</label>
                                    <select class="filter-input">
                                        <option value="all">全部部门</option>
                                        <option value="admin">行政部</option>
                                        <option value="hr">人事部</option>
                                        <option value="finance">财务部</option>
                                        <option value="tech">技术部</option>
                                    </select>
                                </div>
                                <div class="filter-group">
                                    <label class="filter-label">数据类型</label>
                                    <select class="filter-input">
                                        <option value="all">全部类型</option>
                                        <option value="business">公务数据</option>
                                        <option value="user">用户数据</option>
                                        <option value="system">系统数据</option>
                                    </select>
                                </div>
                                <div class="filter-group">
                                    <label class="filter-label">开始日期</label>
                                    <input type="date" class="filter-input" value="2024-01-01">
                                </div>
                                <div class="filter-group">
                                    <label class="filter-label">结束日期</label>
                                    <input type="date" class="filter-input" value="2024-12-31">
                                </div>
                            </div>
                            <div class="filter-actions">
                                <button class="btn-filter btn-filter-primary" onclick="applyDataFilter()">应用筛选</button>
                                <button class="btn-filter btn-filter-secondary" onclick="resetDataFilter()">重置</button>
                                <button class="btn-filter btn-filter-secondary" onclick="exportData()">导出数据</button>
                            </div>
                        </div>

                        <!-- 统计概览 -->
                        <div class="stats-overview">
                            <div class="stat-overview-card">
                                <div class="stat-overview-header">
                                    <div class="stat-overview-title">总用户数</div>
                                    <div class="stat-overview-icon">👥</div>
                                </div>
                                <div class="stat-overview-value">1,234</div>
                                <div class="stat-overview-change">
                                    <span>↗</span>
                                    <span>+12.5%</span>
                                    <span>较上月</span>
                                </div>
                            </div>
                            <div class="stat-overview-card">
                                <div class="stat-overview-header">
                                    <div class="stat-overview-title">活跃用户</div>
                                    <div class="stat-overview-icon">🔥</div>
                                </div>
                                <div class="stat-overview-value">856</div>
                                <div class="stat-overview-change">
                                    <span>↗</span>
                                    <span>+8.3%</span>
                                    <span>较上月</span>
                                </div>
                            </div>
                            <div class="stat-overview-card">
                                <div class="stat-overview-header">
                                    <div class="stat-overview-title">公务处理量</div>
                                    <div class="stat-overview-icon">📋</div>
                                </div>
                                <div class="stat-overview-value">2,567</div>
                                <div class="stat-overview-change">
                                    <span>↗</span>
                                    <span>+15.2%</span>
                                    <span>较上月</span>
                                </div>
                            </div>
                            <div class="stat-overview-card">
                                <div class="stat-overview-header">
                                    <div class="stat-overview-title">系统响应时间</div>
                                    <div class="stat-overview-icon">⚡</div>
                                </div>
                                <div class="stat-overview-value">0.8s</div>
                                <div class="stat-overview-change negative">
                                    <span>↘</span>
                                    <span>-5.2%</span>
                                    <span>较上月</span>
                                </div>
                            </div>
                        </div>

                        <!-- 图表区域 -->
                        <div class="chart-container">
                            <div class="chart-title">用户活跃度趋势</div>
                            <div class="chart-placeholder">
                                📊 用户活跃度趋势图表
                                <br>
                                <small>这里将显示用户活跃度的折线图</small>
                            </div>
                        </div>

                        <div class="chart-container">
                            <div class="chart-title">部门数据分布</div>
                            <div class="chart-placeholder">
                                📊 部门数据分布饼图
                                <br>
                                <small>这里将显示各部门数据占比的饼图</small>
                            </div>
                        </div>

                        <div class="chart-container">
                            <div class="chart-title">公务处理效率分析</div>
                            <div class="chart-placeholder">
                                📊 公务处理效率柱状图
                                <br>
                                <small>这里将显示公务处理效率的柱状图</small>
                            </div>
                        </div>
                    </div>

                    <!-- 权限设置内容 -->
                    <div class="data-content" id="permissions-content">
                        <div class="permission-section">
                            <h3 class="section-subtitle">🔐 用户权限管理</h3>
                            <div class="permission-grid">
                                <div class="permission-card">
                                    <div class="permission-header">
                                        <div class="permission-title">管理员权限</div>
                                        <div class="permission-toggle active" onclick="togglePermission(this)"></div>
                                    </div>
                                    <ul class="permission-list">
                                        <li class="permission-item">
                                            <span class="permission-item-label">系统配置管理</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">用户管理</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">数据查看</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">数据导出</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="permission-card">
                                    <div class="permission-header">
                                        <div class="permission-title">部门主管权限</div>
                                        <div class="permission-toggle active" onclick="togglePermission(this)"></div>
                                    </div>
                                    <ul class="permission-list">
                                        <li class="permission-item">
                                            <span class="permission-item-label">部门数据查看</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">部门用户管理</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">公务审批</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">数据导出</span>
                                            <div class="permission-item-toggle" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="permission-card">
                                    <div class="permission-header">
                                        <div class="permission-title">普通用户权限</div>
                                        <div class="permission-toggle active" onclick="togglePermission(this)"></div>
                                    </div>
                                    <ul class="permission-list">
                                        <li class="permission-item">
                                            <span class="permission-item-label">个人信息查看</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">公务申请</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">公告查看</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">数据查看</span>
                                            <div class="permission-item-toggle" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="permission-card">
                                    <div class="permission-header">
                                        <div class="permission-title">访客权限</div>
                                        <div class="permission-toggle" onclick="togglePermission(this)"></div>
                                    </div>
                                    <ul class="permission-list">
                                        <li class="permission-item">
                                            <span class="permission-item-label">公告查看</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">基本信息查看</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">系统登录</span>
                                            <div class="permission-item-toggle" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">数据访问</span>
                                            <div class="permission-item-toggle" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="permission-section">
                            <h3 class="section-subtitle">🔒 数据访问权限</h3>
                            <div class="permission-grid">
                                <div class="permission-card">
                                    <div class="permission-header">
                                        <div class="permission-title">敏感数据保护</div>
                                        <div class="permission-toggle active" onclick="togglePermission(this)"></div>
                                    </div>
                                    <ul class="permission-list">
                                        <li class="permission-item">
                                            <span class="permission-item-label">身份证号加密</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">手机号脱敏</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">地址信息保护</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">操作日志记录</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="permission-card">
                                    <div class="permission-header">
                                        <div class="permission-title">数据导出限制</div>
                                        <div class="permission-toggle active" onclick="togglePermission(this)"></div>
                                    </div>
                                    <ul class="permission-list">
                                        <li class="permission-item">
                                            <span class="permission-item-label">导出数量限制</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">导出格式限制</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">导出审批流程</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                        <li class="permission-item">
                                            <span class="permission-item-label">导出记录追踪</span>
                                            <div class="permission-item-toggle active" onclick="togglePermissionItem(this)"></div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="form-actions">
                            <button class="btn btn-secondary" onclick="resetPermissions()">重置权限</button>
                            <button class="btn btn-primary" onclick="savePermissions()">保存权限设置</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 系统管理模块 -->
            <div class="system-management-module" id="system-management-module">
                <div class="module-header">系统管理</div>
                <div class="module-content">
                    <div class="system-tabs">
                        <div class="system-tab active" onclick="switchSystemTab('user-management')">用户管理</div>
                        <div class="system-tab" onclick="switchSystemTab('role-management')">角色管理</div>
                        <div class="system-tab" onclick="switchSystemTab('system-config')">系统配置</div>
                        <div class="system-tab" onclick="switchSystemTab('log-management')">日志管理</div>
                    </div>
                    
                    <!-- 用户管理内容 -->
                    <div class="system-content active" id="user-management-content">
                        <div class="system-management-section">
                            <div class="system-actions">
                                <button class="btn-system btn-system-primary" onclick="openSystemUserModal('add')">
                                    <span>➕</span>
                                    新增用户
                                </button>
                                <button class="btn-system btn-system-secondary" onclick="importSystemUsers()">
                                    <span>📥</span>
                                    批量导入
                                </button>
                                <button class="btn-system btn-system-success" onclick="exportSystemUsers()">
                                    <span>📤</span>
                                    导出用户
                                </button>
                                <button class="btn-system btn-system-warning" onclick="resetUserPasswords()">
                                    <span>🔑</span>
                                    重置密码
                                </button>
                            </div>

                            <div class="system-search-section">
                                <div class="system-search-grid">
                                    <div class="system-search-group">
                                        <label class="system-search-label">用户名</label>
                                        <input type="text" class="system-search-input" placeholder="请输入用户名">
                                    </div>
                                    <div class="system-search-group">
                                        <label class="system-search-label">真实姓名</label>
                                        <input type="text" class="system-search-input" placeholder="请输入真实姓名">
                                    </div>
                                    <div class="system-search-group">
                                        <label class="system-search-label">角色</label>
                                        <select class="system-search-input">
                                            <option value="">全部角色</option>
                                            <option value="super_admin">超级管理员</option>
                                            <option value="admin">管理员</option>
                                            <option value="manager">部门主管</option>
                                            <option value="user">普通用户</option>
                                        </select>
                                    </div>
                                    <div class="system-search-group">
                                        <label class="system-search-label">状态</label>
                                        <select class="system-search-input">
                                            <option value="">全部状态</option>
                                            <option value="active">启用</option>
                                            <option value="inactive">禁用</option>
                                            <option value="locked">锁定</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="system-actions">
                                    <button class="btn-system btn-system-primary" onclick="searchSystemUsers()">
                                        <span>🔍</span>
                                        搜索
                                    </button>
                                    <button class="btn-system btn-system-secondary" onclick="resetSystemUserSearch()">
                                        <span>🔄</span>
                                        重置
                                    </button>
                                </div>
                            </div>

                            <div class="system-table-container">
                                <table class="system-table">
                                    <thead>
                                        <tr>
                                            <th>用户信息</th>
                                            <th>角色</th>
                                            <th>部门</th>
                                            <th>状态</th>
                                            <th>最后登录</th>
                                            <th>创建时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <div class="system-user-info">
                                                    <div class="system-user-avatar">张</div>
                                                    <div>
                                                        <div class="system-user-name">张三</div>
                                                        <div class="system-user-account">zhangsan</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td><span class="system-user-role system-user-role-super-admin">超级管理员</span></td>
                                            <td>系统管理部</td>
                                            <td><span class="system-user-status system-user-status-active">启用</span></td>
                                            <td>2024-01-15 14:30</td>
                                            <td>2023-01-01</td>
                                            <td class="system-actions-cell">
                                                <button class="btn-action btn-action-view" onclick="viewSystemUser(1)">查看</button>
                                                <button class="btn-action btn-action-edit" onclick="editSystemUser(1)">编辑</button>
                                                <button class="btn-action btn-action-delete" onclick="deleteSystemUser(1)">删除</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="system-user-info">
                                                    <div class="system-user-avatar">李</div>
                                                    <div>
                                                        <div class="system-user-name">李四</div>
                                                        <div class="system-user-account">lisi</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td><span class="system-user-role system-user-role-admin">管理员</span></td>
                                            <td>人事部</td>
                                            <td><span class="system-user-status system-user-status-active">启用</span></td>
                                            <td>2024-01-15 13:45</td>
                                            <td>2023-02-15</td>
                                            <td class="system-actions-cell">
                                                <button class="btn-action btn-action-view" onclick="viewSystemUser(2)">查看</button>
                                                <button class="btn-action btn-action-edit" onclick="editSystemUser(2)">编辑</button>
                                                <button class="btn-action btn-action-delete" onclick="deleteSystemUser(2)">删除</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="system-user-info">
                                                    <div class="system-user-avatar">王</div>
                                                    <div>
                                                        <div class="system-user-name">王五</div>
                                                        <div class="system-user-account">wangwu</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td><span class="system-user-role system-user-role-manager">部门主管</span></td>
                                            <td>财务部</td>
                                            <td><span class="system-user-status system-user-status-locked">锁定</span></td>
                                            <td>2024-01-14 16:20</td>
                                            <td>2023-03-10</td>
                                            <td class="system-actions-cell">
                                                <button class="btn-action btn-action-view" onclick="viewSystemUser(3)">查看</button>
                                                <button class="btn-action btn-action-edit" onclick="editSystemUser(3)">编辑</button>
                                                <button class="btn-action btn-action-delete" onclick="deleteSystemUser(3)">删除</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="system-user-info">
                                                    <div class="system-user-avatar">赵</div>
                                                    <div>
                                                        <div class="system-user-name">赵六</div>
                                                        <div class="system-user-account">zhaoliu</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td><span class="system-user-role system-user-role-user">普通用户</span></td>
                                            <td>技术部</td>
                                            <td><span class="system-user-status system-user-status-inactive">禁用</span></td>
                                            <td>2024-01-10 09:15</td>
                                            <td>2023-04-20</td>
                                            <td class="system-actions-cell">
                                                <button class="btn-action btn-action-view" onclick="viewSystemUser(4)">查看</button>
                                                <button class="btn-action btn-action-edit" onclick="editSystemUser(4)">编辑</button>
                                                <button class="btn-action btn-action-delete" onclick="deleteSystemUser(4)">删除</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- 分页 -->
                            <div class="pagination">
                                <button class="pagination-btn" disabled>上一页</button>
                                <button class="pagination-btn active">1</button>
                                <button class="pagination-btn">2</button>
                                <button class="pagination-btn">3</button>
                                <button class="pagination-btn">下一页</button>
                            </div>
                        </div>
                    </div>

                    <!-- 角色管理内容 -->
                    <div class="system-content" id="role-management-content">
                        <div class="system-management-section">
                            <div class="system-actions">
                                <button class="btn-system btn-system-primary" onclick="openRoleModal('add')">
                                    <span>➕</span>
                                    新增角色
                                </button>
                                <button class="btn-system btn-system-secondary" onclick="copyRole()">
                                    <span>📋</span>
                                    复制角色
                                </button>
                                <button class="btn-system btn-system-success" onclick="exportRoles()">
                                    <span>📤</span>
                                    导出角色
                                </button>
                            </div>

                            <div class="role-grid">
                                <div class="role-card">
                                    <div class="role-header">
                                        <div class="role-title">超级管理员</div>
                                        <div class="role-actions">
                                            <button class="btn-action btn-action-edit" onclick="editRole('super_admin')">编辑</button>
                                            <button class="btn-action btn-action-delete" onclick="deleteRole('super_admin')">删除</button>
                                        </div>
                                    </div>
                                    <div class="role-info">
                                        <div class="role-description">拥有系统所有权限，可以管理所有功能模块</div>
                                        <div class="role-stats">
                                            <span class="role-stat">用户数: 2</span>
                                            <span class="role-stat">权限数: 25</span>
                                        </div>
                                    </div>
                                    <div class="role-permissions">
                                        <div class="permission-category">
                                            <div class="permission-category-title">系统管理</div>
                                            <div class="permission-tags">
                                                <span class="permission-tag">用户管理</span>
                                                <span class="permission-tag">角色管理</span>
                                                <span class="permission-tag">系统配置</span>
                                                <span class="permission-tag">日志管理</span>
                                            </div>
                                        </div>
                                        <div class="permission-category">
                                            <div class="permission-category-title">数据管理</div>
                                            <div class="permission-tags">
                                                <span class="permission-tag">数据查看</span>
                                                <span class="permission-tag">数据导出</span>
                                                <span class="permission-tag">数据删除</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="role-card">
                                    <div class="role-header">
                                        <div class="role-title">管理员</div>
                                        <div class="role-actions">
                                            <button class="btn-action btn-action-edit" onclick="editRole('admin')">编辑</button>
                                            <button class="btn-action btn-action-delete" onclick="deleteRole('admin')">删除</button>
                                        </div>
                                    </div>
                                    <div class="role-info">
                                        <div class="role-description">可以管理指定部门或模块的用户和权限</div>
                                        <div class="role-stats">
                                            <span class="role-stat">用户数: 8</span>
                                            <span class="role-stat">权限数: 18</span>
                                        </div>
                                    </div>
                                    <div class="role-permissions">
                                        <div class="permission-category">
                                            <div class="permission-category-title">部门管理</div>
                                            <div class="permission-tags">
                                                <span class="permission-tag">部门用户管理</span>
                                                <span class="permission-tag">部门数据查看</span>
                                            </div>
                                        </div>
                                        <div class="permission-category">
                                            <div class="permission-category-title">业务管理</div>
                                            <div class="permission-tags">
                                                <span class="permission-tag">公务审批</span>
                                                <span class="permission-tag">公告管理</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="role-card">
                                    <div class="role-header">
                                        <div class="role-title">部门主管</div>
                                        <div class="role-actions">
                                            <button class="btn-action btn-action-edit" onclick="editRole('manager')">编辑</button>
                                            <button class="btn-action btn-action-delete" onclick="deleteRole('manager')">删除</button>
                                        </div>
                                    </div>
                                    <div class="role-info">
                                        <div class="role-description">负责本部门的日常管理和业务审批</div>
                                        <div class="role-stats">
                                            <span class="role-stat">用户数: 15</span>
                                            <span class="role-stat">权限数: 12</span>
                                        </div>
                                    </div>
                                    <div class="role-permissions">
                                        <div class="permission-category">
                                            <div class="permission-category-title">部门管理</div>
                                            <div class="permission-tags">
                                                <span class="permission-tag">部门数据查看</span>
                                                <span class="permission-tag">部门报表</span>
                                            </div>
                                        </div>
                                        <div class="permission-category">
                                            <div class="permission-category-title">业务管理</div>
                                            <div class="permission-tags">
                                                <span class="permission-tag">公务审批</span>
                                                <span class="permission-tag">公告查看</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="role-card">
                                    <div class="role-header">
                                        <div class="role-title">普通用户</div>
                                        <div class="role-actions">
                                            <button class="btn-action btn-action-edit" onclick="editRole('user')">编辑</button>
                                            <button class="btn-action btn-action-delete" onclick="deleteRole('user')">删除</button>
                                        </div>
                                    </div>
                                    <div class="role-info">
                                        <div class="role-description">基本的系统使用权限，可以申请公务和查看公告</div>
                                        <div class="role-stats">
                                            <span class="role-stat">用户数: 156</span>
                                            <span class="role-stat">权限数: 6</span>
                                        </div>
                                    </div>
                                    <div class="role-permissions">
                                        <div class="permission-category">
                                            <div class="permission-category-title">基础功能</div>
                                            <div class="permission-tags">
                                                <span class="permission-tag">个人信息查看</span>
                                                <span class="permission-tag">公务申请</span>
                                                <span class="permission-tag">公告查看</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 系统配置内容 -->
                    <div class="system-content" id="system-config-content">
                        <div class="system-management-section">
                            <div class="config-section">
                                <h3 class="section-subtitle">⚙️ 基本配置</h3>
                                <div class="config-grid">
                                    <div class="config-card">
                                        <div class="config-header">
                                            <div class="config-title">系统信息</div>
                                            <button class="btn-action btn-action-edit" onclick="editSystemInfo()">编辑</button>
                                        </div>
                                        <div class="config-content">
                                            <div class="config-item">
                                                <span class="config-label">系统名称:</span>
                                                <span class="config-value">政务管理系统</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">系统版本:</span>
                                                <span class="config-value">v2.1.0</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">系统管理员:</span>
                                                <span class="config-value">admin@gov.cn</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">系统状态:</span>
                                                <span class="config-value config-status-active">正常运行</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="config-card">
                                        <div class="config-header">
                                            <div class="config-title">安全配置</div>
                                            <button class="btn-action btn-action-edit" onclick="editSecurityConfig()">编辑</button>
                                        </div>
                                        <div class="config-content">
                                            <div class="config-item">
                                                <span class="config-label">密码最小长度:</span>
                                                <span class="config-value">8位</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">密码复杂度:</span>
                                                <span class="config-value">必须包含字母和数字</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">登录失败锁定:</span>
                                                <span class="config-value">5次</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">会话超时时间:</span>
                                                <span class="config-value">30分钟</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="config-card">
                                        <div class="config-header">
                                            <div class="config-title">邮件配置</div>
                                            <button class="btn-action btn-action-edit" onclick="editEmailConfig()">编辑</button>
                                        </div>
                                        <div class="config-content">
                                            <div class="config-item">
                                                <span class="config-label">SMTP服务器:</span>
                                                <span class="config-value">smtp.gov.cn</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">SMTP端口:</span>
                                                <span class="config-value">587</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">发件人邮箱:</span>
                                                <span class="config-value">system@gov.cn</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">邮件状态:</span>
                                                <span class="config-value config-status-active">已启用</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="config-card">
                                        <div class="config-header">
                                            <div class="config-title">备份配置</div>
                                            <button class="btn-action btn-action-edit" onclick="editBackupConfig()">编辑</button>
                                        </div>
                                        <div class="config-content">
                                            <div class="config-item">
                                                <span class="config-label">自动备份:</span>
                                                <span class="config-value config-status-active">已启用</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">备份频率:</span>
                                                <span class="config-value">每日</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">备份保留时间:</span>
                                                <span class="config-value">30天</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">最后备份:</span>
                                                <span class="config-value">2024-01-15 02:00</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="config-section">
                                <h3 class="section-subtitle">🔧 高级配置</h3>
                                <div class="config-grid">
                                    <div class="config-card">
                                        <div class="config-header">
                                            <div class="config-title">数据库配置</div>
                                            <button class="btn-action btn-action-edit" onclick="editDatabaseConfig()">编辑</button>
                                        </div>
                                        <div class="config-content">
                                            <div class="config-item">
                                                <span class="config-label">数据库类型:</span>
                                                <span class="config-value">MySQL 8.0</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">连接池大小:</span>
                                                <span class="config-value">20</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">查询超时:</span>
                                                <span class="config-value">30秒</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">连接状态:</span>
                                                <span class="config-value config-status-active">正常</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="config-card">
                                        <div class="config-header">
                                            <div class="config-title">缓存配置</div>
                                            <button class="btn-action btn-action-edit" onclick="editCacheConfig()">编辑</button>
                                        </div>
                                        <div class="config-content">
                                            <div class="config-item">
                                                <span class="config-label">缓存类型:</span>
                                                <span class="config-value">Redis</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">缓存大小:</span>
                                                <span class="config-value">2GB</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">过期时间:</span>
                                                <span class="config-value">1小时</span>
                                            </div>
                                            <div class="config-item">
                                                <span class="config-label">缓存状态:</span>
                                                <span class="config-value config-status-active">正常</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 日志管理内容 -->
                    <div class="system-content" id="log-management-content">
                        <div class="system-management-section">
                            <div class="system-actions">
                                <button class="btn-system btn-system-primary" onclick="exportLogs()">
                                    <span>📤</span>
                                    导出日志
                                </button>
                                <button class="btn-system btn-system-secondary" onclick="clearLogs()">
                                    <span>🗑️</span>
                                    清理日志
                                </button>
                                <button class="btn-system btn-system-warning" onclick="logAnalysis()">
                                    <span>📊</span>
                                    日志分析
                                </button>
                            </div>

                            <div class="log-filter-section">
                                <div class="log-filter-grid">
                                    <div class="log-filter-group">
                                        <label class="log-filter-label">日志类型</label>
                                        <select class="log-filter-input">
                                            <option value="">全部类型</option>
                                            <option value="login">登录日志</option>
                                            <option value="operation">操作日志</option>
                                            <option value="error">错误日志</option>
                                            <option value="system">系统日志</option>
                                        </select>
                                    </div>
                                    <div class="log-filter-group">
                                        <label class="log-filter-label">用户</label>
                                        <input type="text" class="log-filter-input" placeholder="请输入用户名">
                                    </div>
                                    <div class="log-filter-group">
                                        <label class="log-filter-label">开始时间</label>
                                        <input type="datetime-local" class="log-filter-input">
                                    </div>
                                    <div class="log-filter-group">
                                        <label class="log-filter-label">结束时间</label>
                                        <input type="datetime-local" class="log-filter-input">
                                    </div>
                                </div>
                                <div class="system-actions">
                                    <button class="btn-system btn-system-primary" onclick="searchLogs()">
                                        <span>🔍</span>
                                        搜索
                                    </button>
                                    <button class="btn-system btn-system-secondary" onclick="resetLogSearch()">
                                        <span>🔄</span>
                                        重置
                                    </button>
                                </div>
                            </div>

                            <div class="log-table-container">
                                <table class="log-table">
                                    <thead>
                                        <tr>
                                            <th>时间</th>
                                            <th>用户</th>
                                            <th>操作</th>
                                            <th>IP地址</th>
                                            <th>状态</th>
                                            <th>详情</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>2024-01-15 14:30:25</td>
                                            <td>zhangsan</td>
                                            <td>用户登录</td>
                                            <td>192.168.1.100</td>
                                            <td><span class="log-status log-status-success">成功</span></td>
                                            <td><button class="btn-action btn-action-view" onclick="viewLogDetail(1)">查看</button></td>
                                        </tr>
                                        <tr>
                                            <td>2024-01-15 14:25:18</td>
                                            <td>lisi</td>
                                            <td>新增用户</td>
                                            <td>192.168.1.101</td>
                                            <td><span class="log-status log-status-success">成功</span></td>
                                            <td><button class="btn-action btn-action-view" onclick="viewLogDetail(2)">查看</button></td>
                                        </tr>
                                        <tr>
                                            <td>2024-01-15 14:20:45</td>
                                            <td>wangwu</td>
                                            <td>修改角色权限</td>
                                            <td>192.168.1.102</td>
                                            <td><span class="log-status log-status-success">成功</span></td>
                                            <td><button class="btn-action btn-action-view" onclick="viewLogDetail(3)">查看</button></td>
                                        </tr>
                                        <tr>
                                            <td>2024-01-15 14:15:32</td>
                                            <td>zhaoliu</td>
                                            <td>用户登录</td>
                                            <td>192.168.1.103</td>
                                            <td><span class="log-status log-status-error">失败</span></td>
                                            <td><button class="btn-action btn-action-view" onclick="viewLogDetail(4)">查看</button></td>
                                        </tr>
                                        <tr>
                                            <td>2024-01-15 14:10:15</td>
                                            <td>system</td>
                                            <td>系统备份</td>
                                            <td>127.0.0.1</td>
                                            <td><span class="log-status log-status-success">成功</span></td>
                                            <td><button class="btn-action btn-action-view" onclick="viewLogDetail(5)">查看</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- 分页 -->
                            <div class="pagination">
                                <button class="pagination-btn" disabled>上一页</button>
                                <button class="pagination-btn active">1</button>
                                <button class="pagination-btn">2</button>
                                <button class="pagination-btn">3</button>
                                <button class="pagination-btn">下一页</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 单位管理模态框 -->
    <div id="unitModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title" id="unitModalTitle">新增单位</div>
                <button class="modal-close" onclick="closeUnitModal()">&times;</button>
            </div>
            <div class="modal-body">
                <form class="modal-form" id="unitForm">
                    <div class="modal-form-group">
                        <label class="modal-form-label">单位名称</label>
                        <input type="text" class="modal-form-input" id="unitName" placeholder="请输入单位名称" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">单位代码</label>
                        <input type="text" class="modal-form-input" id="unitCode" placeholder="请输入单位代码" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">上级单位</label>
                        <select class="modal-form-select" id="parentUnit">
                            <option value="">无上级单位</option>
                            <option value="gov001">市政府办公厅</option>
                            <option value="gov002">市发展和改革委员会</option>
                            <option value="gov003">市教育局</option>
                            <option value="gov004">市财政局</option>
                        </select>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">单位类型</label>
                        <select class="modal-form-select" id="unitType" required>
                            <option value="">请选择单位类型</option>
                            <option value="administrative">行政机关</option>
                            <option value="institution">事业单位</option>
                            <option value="enterprise">企业单位</option>
                            <option value="social">社会组织</option>
                        </select>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">负责人</label>
                        <input type="text" class="modal-form-input" id="unitManager" placeholder="请输入负责人姓名">
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">联系电话</label>
                        <input type="tel" class="modal-form-input" id="unitPhone" placeholder="请输入联系电话">
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">单位地址</label>
                        <input type="text" class="modal-form-input" id="unitAddress" placeholder="请输入单位地址">
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">单位描述</label>
                        <textarea class="modal-form-textarea" id="unitDescription" placeholder="请输入单位描述"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeUnitModal()">取消</button>
                <button class="btn btn-primary" onclick="saveUnit()">保存</button>
            </div>
        </div>
    </div>

    <!-- 用户管理模态框 -->
    <div id="userModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title" id="userModalTitle">新增用户</div>
                <button class="modal-close" onclick="closeUserModal()">&times;</button>
            </div>
            <div class="modal-body">
                <form class="modal-form" id="userForm">
                    <div class="modal-form-group">
                        <label class="modal-form-label">姓名</label>
                        <input type="text" class="modal-form-input" id="userName" placeholder="请输入姓名" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">邮箱</label>
                        <input type="email" class="modal-form-input" id="userEmail" placeholder="请输入邮箱" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">部门</label>
                        <select class="modal-form-select" id="userDepartment" required>
                            <option value="">请选择部门</option>
                            <option value="gov001">市政府办公厅</option>
                            <option value="gov002">市发展和改革委员会</option>
                            <option value="gov003">市教育局</option>
                            <option value="gov004">市财政局</option>
                        </select>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">角色</label>
                        <select class="modal-form-select" id="userRole" required>
                            <option value="">请选择角色</option>
                            <option value="admin">管理员</option>
                            <option value="manager">部门主管</option>
                            <option value="user">普通用户</option>
                        </select>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">联系电话</label>
                        <input type="tel" class="modal-form-input" id="userPhone" placeholder="请输入联系电话">
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">密码</label>
                        <input type="password" class="modal-form-input" id="userPassword" placeholder="请输入密码" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">确认密码</label>
                        <input type="password" class="modal-form-input" id="userConfirmPassword" placeholder="请确认密码" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeUserModal()">取消</button>
                <button class="btn btn-primary" onclick="saveUser()">保存</button>
            </div>
        </div>
    </div>

    <!-- 附属单位人员管理模态框 -->
    <div id="subsidiaryUserModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title" id="subsidiaryUserModalTitle">新增附属单位人员</div>
                <button class="modal-close" onclick="closeSubsidiaryUserModal()">&times;</button>
            </div>
            <div class="modal-body">
                <form class="modal-form" id="subsidiaryUserForm">
                    <div class="modal-form-group">
                        <label class="modal-form-label">姓名</label>
                        <input type="text" class="modal-form-input" id="subsidiaryUserName" placeholder="请输入姓名" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">邮箱</label>
                        <input type="email" class="modal-form-input" id="subsidiaryUserEmail" placeholder="请输入邮箱" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">附属单位</label>
                        <select class="modal-form-select" id="subsidiaryUnit" required>
                            <option value="">请选择附属单位</option>
                            <option value="sub001">市第一中学</option>
                            <option value="sub002">市人民医院</option>
                            <option value="sub003">市图书馆</option>
                            <option value="sub004">市博物馆</option>
                        </select>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">职位</label>
                        <input type="text" class="modal-form-input" id="subsidiaryUserPosition" placeholder="请输入职位" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">联系电话</label>
                        <input type="tel" class="modal-form-input" id="subsidiaryUserPhone" placeholder="请输入联系电话">
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">入职时间</label>
                        <input type="date" class="modal-form-input" id="subsidiaryUserHireDate" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">状态</label>
                        <select class="modal-form-select" id="subsidiaryUserStatus" required>
                            <option value="">请选择状态</option>
                            <option value="active">在职</option>
                            <option value="inactive">离职</option>
                            <option value="suspended">停职</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeSubsidiaryUserModal()">取消</button>
                <button class="btn btn-primary" onclick="saveSubsidiaryUser()">保存</button>
            </div>
        </div>
    </div>

    <script>
        // 切换导航模块
        function switchModule(module) {
            // 移除所有活动状态
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            
            // 添加活动状态到当前点击的链接
            event.target.closest('.nav-link').classList.add('active');
            
            // 更新页面标题和面包屑
            const pageTitle = document.querySelector('.page-title');
            const breadcrumb = document.querySelector('.breadcrumb');
            
            const moduleNames = {
                'homepage': '系统首页',
                'official-business': '公务办理',
                'data-analysis': '数据分析',
                'organization': '单位组织',
                'system-management': '系统管理'
            };
            
            const breadcrumbNames = {
                'homepage': '首页 > 主页',
                'official-business': '首页 > 公务办理',
                'data-analysis': '首页 > 数据分析',
                'organization': '首页 > 单位组织',
                'system-management': '首页 > 系统管理'
            };
            
            if (moduleNames[module]) {
                pageTitle.textContent = moduleNames[module];
                breadcrumb.innerHTML = breadcrumbNames[module];
            }
            
            // 隐藏所有模块
            document.querySelector('.personal-info-module').classList.add('hidden');
            document.querySelector('.homepage-module').classList.add('hidden');
            document.querySelector('.announcement-module').classList.add('hidden');
            document.querySelector('.official-business-module').classList.remove('active');
            document.querySelector('.official-business-module').style.display = 'none';
            document.querySelector('.data-analysis-module').classList.remove('active');
            document.querySelector('.data-analysis-module').style.display = 'none';
            
            // 根据模块类型显示对应内容
            if (module === 'homepage') {
                document.querySelector('.personal-info-module').classList.remove('hidden');
                document.querySelector('.homepage-module').classList.remove('hidden');
                document.querySelector('.announcement-module').classList.remove('hidden');
            } else if (module === 'official-business') {
                document.querySelector('.official-business-module').classList.add('active');
                document.querySelector('.official-business-module').style.display = 'block';
            } else if (module === 'data-analysis') {
                document.querySelector('.data-analysis-module').classList.add('active');
                document.querySelector('.data-analysis-module').style.display = 'block';
            }
            
            // 这里可以添加实际的模块切换逻辑
            console.log('切换到模块:', module);
        }

        // 切换标签页
        function switchTab(tab) {
            // 移除所有活动状态
            document.querySelectorAll('.tab-item').forEach(item => {
                item.classList.remove('active');
            });
            
            // 添加活动状态到当前点击的标签
            event.target.classList.add('active');
            
            // 这里可以添加实际的标签切换逻辑
            console.log('切换到标签:', tab);
        }

        // 切换公务办理模块的标签页
        function switchBusinessTab(tab) {
            document.querySelectorAll('.business-tab').forEach(item => {
                item.classList.remove('active');
            });
            event.target.classList.add('active');

            document.querySelectorAll('.business-content').forEach(content => {
                content.classList.remove('active');
            });
            document.getElementById(`${tab}-application-content`).classList.add('active');
        }

        // 移动端侧边栏切换
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('open');
        }

        // 点击主内容区域时关闭移动端侧边栏
        document.querySelector('.main-content').addEventListener('click', function() {
            if (window.innerWidth <= 768) {
                document.getElementById('sidebar').classList.remove('open');
            }
        });

        // 窗口大小改变时处理侧边栏
        window.addEventListener('resize', function() {
            if (window.innerWidth > 768) {
                document.getElementById('sidebar').classList.remove('open');
            }
        });

        // 密码字段切换显示/隐藏
        document.querySelector('.password-icon').addEventListener('click', function() {
            const passwordField = document.querySelector('.password-field');
            if (passwordField.type === 'password') {
                passwordField.type = 'text';
                this.textContent = '🙈';
            } else {
                passwordField.type = 'password';
                this.textContent = '⚡';
            }
        });

        // 搜索功能
        document.querySelector('.search-input').addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const announcementItems = document.querySelectorAll('.announcement-item');
            
            announcementItems.forEach(item => {
                const content = item.querySelector('.announcement-content').textContent.toLowerCase();
                if (content.includes(searchTerm)) {
                    item.style.display = 'flex';
                } else {
                    item.style.display = 'none';
                }
            });
        });

        // 快捷操作功能
        function quickAction(action) {
            const actionNames = {
                'new-announcement': '发布公告',
                'approve': '审批公务',
                'report': '生成报表',
                'settings': '系统设置'
            };
            
            alert(`正在执行：${actionNames[action]}`);
            // 这里可以添加实际的快捷操作逻辑
            console.log('快捷操作:', action);
        }

        // 关闭公务办理模块
        function closeBusinessModule() {
            document.getElementById('official-business-module').classList.remove('active');
            document.getElementById('official-business-module').style.display = 'none';
            document.querySelector('.main-content').removeEventListener('click', closeBusinessModule); // 移除点击事件监听
        }

        // 提交请假申请
        function submitLeaveApplication() {
            const leaveType = document.getElementById('leave-type').value;
            const leaveStartDate = document.getElementById('leave-start-date').value;
            const leaveEndDate = document.getElementById('leave-end-date').value;
            const leaveReason = document.getElementById('leave-reason').value;
            const leaveAttachment = document.getElementById('leave-attachment').files[0];

            if (!leaveType || !leaveStartDate || !leaveEndDate || !leaveReason) {
                alert('请填写完整的请假申请信息！');
                return;
            }

            let attachmentInfo = '';
            if (leaveAttachment) {
                attachmentInfo = `附件: ${leaveAttachment.name}`;
            }

            const applicationData = {
                type: 'leave',
                leaveType: leaveType,
                startDate: leaveStartDate,
                endDate: leaveEndDate,
                reason: leaveReason,
                attachment: attachmentInfo
            };

            alert(`请假申请已提交！\n\n申请类型: ${applicationData.leaveType}\n开始日期: ${applicationData.startDate}\n结束日期: ${applicationData.endDate}\n请假原因: ${applicationData.reason}\n${applicationData.attachment}`);
            console.log('请假申请数据:', applicationData);
            closeBusinessModule(); // 提交后关闭模块
        }

        // 提交出差申请
        function submitTravelApplication() {
            const travelDestination = document.getElementById('travel-destination').value;
            const travelStartDate = document.getElementById('travel-start-date').value;
            const travelEndDate = document.getElementById('travel-end-date').value;
            const travelPurpose = document.getElementById('travel-purpose').value;
            const travelAttachment = document.getElementById('travel-attachment').files[0];

            if (!travelDestination || !travelStartDate || !travelEndDate || !travelPurpose) {
                alert('请填写完整的出差申请信息！');
                return;
            }

            let attachmentInfo = '';
            if (travelAttachment) {
                attachmentInfo = `附件: ${travelAttachment.name}`;
            }

            const applicationData = {
                type: 'travel',
                destination: travelDestination,
                startDate: travelStartDate,
                endDate: travelEndDate,
                purpose: travelPurpose,
                attachment: attachmentInfo
            };

            alert(`出差申请已提交！\n\n目的地: ${applicationData.destination}\n开始日期: ${applicationData.startDate}\n结束日期: ${applicationData.endDate}\n出差目的: ${applicationData.purpose}\n${applicationData.attachment}`);
            console.log('出差申请数据:', applicationData);
            closeBusinessModule(); // 提交后关闭模块
        }

        // 文件上传功能
        document.getElementById('leave-attachment').addEventListener('change', function() {
            const file = this.files[0];
            const label = this.nextElementSibling;
            if (file) {
                label.textContent = `📎 ${file.name}`;
                label.style.color = '#3b82f6';
            } else {
                label.textContent = '📎 选择文件';
                label.style.color = '#6b7280';
            }
        });

        document.getElementById('travel-attachment').addEventListener('change', function() {
            const file = this.files[0];
            const label = this.nextElementSibling;
            if (file) {
                label.textContent = `📎 ${file.name}`;
                label.style.color = '#3b82f6';
            } else {
                label.textContent = '📎 选择文件';
                label.style.color = '#6b7280';
            }
        });

        // 数据分析模块功能
        function switchDataTab(tab) {
            // 移除所有活动状态
            document.querySelectorAll('.data-tab').forEach(item => {
                item.classList.remove('active');
            });
            event.target.classList.add('active');

            // 隐藏所有内容
            document.querySelectorAll('.data-content').forEach(content => {
                content.classList.remove('active');
            });
            
            // 显示对应内容
            if (tab === 'statistics') {
                document.getElementById('statistics-content').classList.add('active');
            } else if (tab === 'permissions') {
                document.getElementById('permissions-content').classList.add('active');
            }
        }

        // 权限切换功能
        function togglePermission(element) {
            element.classList.toggle('active');
            const permissionCard = element.closest('.permission-card');
            const permissionItems = permissionCard.querySelectorAll('.permission-item-toggle');
            
            // 如果主权限关闭，则关闭所有子权限
            if (!element.classList.contains('active')) {
                permissionItems.forEach(item => {
                    item.classList.remove('active');
                });
            } else {
                // 如果主权限开启，则开启默认的子权限
                permissionItems.forEach((item, index) => {
                    if (index < 3) { // 默认开启前3个权限
                        item.classList.add('active');
                    }
                });
            }
        }

        function togglePermissionItem(element) {
            element.classList.toggle('active');
        }

        // 数据筛选功能
        function applyDataFilter() {
            const timeRange = document.querySelector('.filter-section select').value;
            const department = document.querySelectorAll('.filter-section select')[1].value;
            const dataType = document.querySelectorAll('.filter-section select')[2].value;
            const startDate = document.querySelectorAll('.filter-section input[type="date"]')[0].value;
            const endDate = document.querySelectorAll('.filter-section input[type="date"]')[1].value;

            const filterData = {
                timeRange: timeRange,
                department: department,
                dataType: dataType,
                startDate: startDate,
                endDate: endDate
            };

            console.log('应用数据筛选:', filterData);
            alert('数据筛选已应用！\n\n筛选条件：\n时间范围: ' + timeRange + '\n部门: ' + department + '\n数据类型: ' + dataType + '\n开始日期: ' + startDate + '\n结束日期: ' + endDate);
        }

        function resetDataFilter() {
            // 重置所有筛选器
            document.querySelectorAll('.filter-section select').forEach(select => {
                select.selectedIndex = 0;
            });
            document.querySelectorAll('.filter-section input[type="date"]').forEach(input => {
                if (input.value === '2024-01-01') {
                    input.value = '2024-01-01';
                } else if (input.value === '2024-12-31') {
                    input.value = '2024-12-31';
                }
            });
            alert('数据筛选已重置！');
        }

        function exportData() {
            alert('正在导出数据...\n\n导出格式：Excel (.xlsx)\n导出范围：当前筛选条件下的所有数据\n预计文件大小：约 2.5MB');
        }

        // 权限管理功能
        function resetPermissions() {
            if (confirm('确定要重置所有权限设置吗？这将恢复到默认权限配置。')) {
                // 重置所有权限开关
                document.querySelectorAll('.permission-toggle').forEach(toggle => {
                    toggle.classList.remove('active');
                });
                document.querySelectorAll('.permission-item-toggle').forEach(toggle => {
                    toggle.classList.remove('active');
                });
                
                // 恢复默认权限
                const defaultPermissions = [
                    '.permission-card:nth-child(1) .permission-toggle',
                    '.permission-card:nth-child(1) .permission-item-toggle',
                    '.permission-card:nth-child(2) .permission-toggle',
                    '.permission-card:nth-child(2) .permission-item-toggle:nth-child(1)',
                    '.permission-card:nth-child(2) .permission-item-toggle:nth-child(2)',
                    '.permission-card:nth-child(2) .permission-item-toggle:nth-child(3)',
                    '.permission-card:nth-child(3) .permission-toggle',
                    '.permission-card:nth-child(3) .permission-item-toggle:nth-child(1)',
                    '.permission-card:nth-child(3) .permission-item-toggle:nth-child(2)',
                    '.permission-card:nth-child(3) .permission-item-toggle:nth-child(3)',
                    '.permission-card:nth-child(4) .permission-item-toggle:nth-child(1)',
                    '.permission-card:nth-child(4) .permission-item-toggle:nth-child(2)',
                    '.permission-card:nth-child(5) .permission-toggle',
                    '.permission-card:nth-child(5) .permission-item-toggle',
                    '.permission-card:nth-child(6) .permission-toggle',
                    '.permission-card:nth-child(6) .permission-item-toggle'
                ];

                defaultPermissions.forEach(selector => {
                    const element = document.querySelector(selector);
                    if (element) {
                        element.classList.add('active');
                    }
                });

                alert('权限设置已重置为默认配置！');
            }
        }

        function savePermissions() {
            // 收集所有权限设置
            const permissions = {};
            document.querySelectorAll('.permission-card').forEach((card, cardIndex) => {
                const cardTitle = card.querySelector('.permission-title').textContent;
                const mainToggle = card.querySelector('.permission-toggle');
                const itemToggles = card.querySelectorAll('.permission-item-toggle');
                
                permissions[cardTitle] = {
                    mainEnabled: mainToggle.classList.contains('active'),
                    items: {}
                };
                
                itemToggles.forEach((toggle, itemIndex) => {
                    const label = toggle.previousElementSibling.textContent;
                    permissions[cardTitle].items[label] = toggle.classList.contains('active');
                });
            });

            console.log('保存权限设置:', permissions);
            alert('权限设置已保存！\n\n已保存的权限配置：\n' + JSON.stringify(permissions, null, 2));
        }

        // 单位组织模块功能
        function switchOrganizationTab(tab) {
            // 移除所有活动状态
            document.querySelectorAll('.organization-tab').forEach(item => {
                item.classList.remove('active');
            });
            event.target.classList.add('active');

            // 隐藏所有内容
            document.querySelectorAll('.organization-content').forEach(content => {
                content.classList.remove('active');
            });
            
            // 显示对应内容
            if (tab === 'unit-management') {
                document.getElementById('unit-management-content').classList.add('active');
            } else if (tab === 'user-management') {
                document.getElementById('user-management-content').classList.add('active');
            }
        }

        function switchUserTab(tab) {
            // 移除所有活动状态
            document.querySelectorAll('.user-subtab').forEach(item => {
                item.classList.remove('active');
            });
            event.target.classList.add('active');

            // 隐藏所有内容
            document.querySelectorAll('.user-content').forEach(content => {
                content.classList.remove('active');
            });
            
            // 显示对应内容
            if (tab === 'main-unit-users') {
                document.getElementById('main-unit-users-content').classList.add('active');
            } else if (tab === 'subsidiary-unit-users') {
                document.getElementById('subsidiary-unit-users-content').classList.add('active');
            }
        }

        // 单位管理功能
        function openUnitModal(action, unitId = null) {
            const modal = document.getElementById('unitModal');
            const title = document.getElementById('unitModalTitle');
            const form = document.getElementById('unitForm');

            if (action === 'add') {
                title.textContent = '新增单位';
                form.reset();
            } else if (action === 'edit') {
                title.textContent = '编辑单位';
                // 这里可以加载单位数据
                loadUnitData(unitId);
            }

            modal.style.display = 'block';
        }

        function closeUnitModal() {
            document.getElementById('unitModal').style.display = 'none';
        }

        function saveUnit() {
            const form = document.getElementById('unitForm');
            const formData = new FormData(form);
            
            // 验证表单
            if (!form.checkValidity()) {
                alert('请填写完整的单位信息！');
                return;
            }

            const unitData = {
                name: document.getElementById('unitName').value,
                code: document.getElementById('unitCode').value,
                parentUnit: document.getElementById('parentUnit').value,
                type: document.getElementById('unitType').value,
                manager: document.getElementById('unitManager').value,
                phone: document.getElementById('unitPhone').value,
                address: document.getElementById('unitAddress').value,
                description: document.getElementById('unitDescription').value
            };

            console.log('保存单位数据:', unitData);
            alert('单位信息保存成功！');
            closeUnitModal();
        }

        function loadUnitData(unitId) {
            // 模拟加载单位数据
            const mockData = {
                1: { name: '市政府办公厅', code: 'GOV001', type: 'administrative', manager: '张主任', phone: '010-12345678' },
                2: { name: '市发展和改革委员会', code: 'GOV002', type: 'administrative', manager: '李主任', phone: '010-12345679' }
            };

            const data = mockData[unitId];
            if (data) {
                document.getElementById('unitName').value = data.name;
                document.getElementById('unitCode').value = data.code;
                document.getElementById('unitType').value = data.type;
                document.getElementById('unitManager').value = data.manager;
                document.getElementById('unitPhone').value = data.phone;
            }
        }

        function viewUnit(unitId) {
            alert(`查看单位信息 - ID: ${unitId}\n\n单位名称: 市政府办公厅\n单位代码: GOV001\n单位类型: 行政机关\n负责人: 张主任\n联系电话: 010-12345678`);
        }

        function editUnit(unitId) {
            openUnitModal('edit', unitId);
        }

        function deleteUnit(unitId) {
            if (confirm('确定要删除这个单位吗？此操作不可恢复。')) {
                console.log('删除单位:', unitId);
                alert('单位删除成功！');
            }
        }

        function exportUnitData() {
            alert('正在导出单位数据...\n\n导出格式：Excel (.xlsx)\n导出范围：所有单位信息\n预计文件大小：约 1.2MB');
        }

        function batchImportUnits() {
            alert('批量导入单位功能\n\n支持格式：Excel (.xlsx)\n请确保文件包含以下列：\n- 单位名称\n- 单位代码\n- 单位类型\n- 负责人\n- 联系电话');
        }

        function unitStatistics() {
            alert('单位统计信息\n\n总单位数：156个\n正常单位：142个\n停用单位：14个\n行政机关：89个\n事业单位：45个\n企业单位：22个');
        }

        // 用户管理功能
        function openUserModal(action, userId = null) {
            const modal = document.getElementById('userModal');
            const title = document.getElementById('userModalTitle');
            const form = document.getElementById('userForm');

            if (action === 'add') {
                title.textContent = '新增用户';
                form.reset();
            } else if (action === 'edit') {
                title.textContent = '编辑用户';
                loadUserData(userId);
            }

            modal.style.display = 'block';
        }

        function closeUserModal() {
            document.getElementById('userModal').style.display = 'none';
        }

        function saveUser() {
            const form = document.getElementById('userForm');
            const password = document.getElementById('userPassword').value;
            const confirmPassword = document.getElementById('userConfirmPassword').value;

            if (!form.checkValidity()) {
                alert('请填写完整的用户信息！');
                return;
            }

            if (password !== confirmPassword) {
                alert('两次输入的密码不一致！');
                return;
            }

            const userData = {
                name: document.getElementById('userName').value,
                email: document.getElementById('userEmail').value,
                department: document.getElementById('userDepartment').value,
                role: document.getElementById('userRole').value,
                phone: document.getElementById('userPhone').value
            };

            console.log('保存用户数据:', userData);
            alert('用户信息保存成功！');
            closeUserModal();
        }

        function loadUserData(userId) {
            // 模拟加载用户数据
            const mockData = {
                1: { name: '张三', email: 'zhangsan@gov.cn', department: 'gov001', role: 'admin', phone: '138****1234' },
                2: { name: '李四', email: 'lisi@gov.cn', department: 'gov002', role: 'manager', phone: '139****5678' }
            };

            const data = mockData[userId];
            if (data) {
                document.getElementById('userName').value = data.name;
                document.getElementById('userEmail').value = data.email;
                document.getElementById('userDepartment').value = data.department;
                document.getElementById('userRole').value = data.role;
                document.getElementById('userPhone').value = data.phone;
            }
        }

        function viewUser(userId) {
            alert(`查看用户信息 - ID: ${userId}\n\n姓名: 张三\n邮箱: zhangsan@gov.cn\n部门: 市政府办公厅\n角色: 管理员\n联系电话: 138****1234\n状态: 在线`);
        }

        function editUser(userId) {
            openUserModal('edit', userId);
        }

        function deleteUser(userId) {
            if (confirm('确定要删除这个用户吗？此操作不可恢复。')) {
                console.log('删除用户:', userId);
                alert('用户删除成功！');
            }
        }

        function searchUsers() {
            const name = document.querySelector('#main-unit-users-content .user-search-input').value;
            const department = document.querySelectorAll('#main-unit-users-content .user-search-input')[1].value;
            const role = document.querySelectorAll('#main-unit-users-content .user-search-input')[2].value;
            const status = document.querySelectorAll('#main-unit-users-content .user-search-input')[3].value;

            console.log('搜索用户:', { name, department, role, status });
            alert(`搜索条件：\n姓名: ${name || '全部'}\n部门: ${department || '全部'}\n角色: ${role || '全部'}\n状态: ${status || '全部'}\n\n正在搜索...`);
        }

        function resetUserSearch() {
            const inputs = document.querySelectorAll('#main-unit-users-content .user-search-input');
            inputs.forEach(input => {
                if (input.tagName === 'SELECT') {
                    input.selectedIndex = 0;
                } else {
                    input.value = '';
                }
            });
            alert('搜索条件已重置！');
        }

        // 附属单位人员管理功能
        function openSubsidiaryUserModal(action, userId = null) {
            const modal = document.getElementById('subsidiaryUserModal');
            const title = document.getElementById('subsidiaryUserModalTitle');
            const form = document.getElementById('subsidiaryUserForm');

            if (action === 'add') {
                title.textContent = '新增附属单位人员';
                form.reset();
            } else if (action === 'edit') {
                title.textContent = '编辑附属单位人员';
                loadSubsidiaryUserData(userId);
            }

            modal.style.display = 'block';
        }

        function closeSubsidiaryUserModal() {
            document.getElementById('subsidiaryUserModal').style.display = 'none';
        }

        function saveSubsidiaryUser() {
            const form = document.getElementById('subsidiaryUserForm');

            if (!form.checkValidity()) {
                alert('请填写完整的附属单位人员信息！');
                return;
            }

            const userData = {
                name: document.getElementById('subsidiaryUserName').value,
                email: document.getElementById('subsidiaryUserEmail').value,
                unit: document.getElementById('subsidiaryUnit').value,
                position: document.getElementById('subsidiaryUserPosition').value,
                phone: document.getElementById('subsidiaryUserPhone').value,
                hireDate: document.getElementById('subsidiaryUserHireDate').value,
                status: document.getElementById('subsidiaryUserStatus').value
            };

            console.log('保存附属单位人员数据:', userData);
            alert('附属单位人员信息保存成功！');
            closeSubsidiaryUserModal();
        }

        function loadSubsidiaryUserData(userId) {
            // 模拟加载附属单位人员数据
            const mockData = {
                1: { name: '陈老师', email: 'chenlaoshi@school.edu.cn', unit: 'sub001', position: '数学教师', phone: '136****3456', hireDate: '2020-09-01', status: 'active' },
                2: { name: '刘医生', email: 'liuyisheng@hospital.com', unit: 'sub002', position: '内科主任', phone: '135****7890', hireDate: '2018-03-15', status: 'active' }
            };

            const data = mockData[userId];
            if (data) {
                document.getElementById('subsidiaryUserName').value = data.name;
                document.getElementById('subsidiaryUserEmail').value = data.email;
                document.getElementById('subsidiaryUnit').value = data.unit;
                document.getElementById('subsidiaryUserPosition').value = data.position;
                document.getElementById('subsidiaryUserPhone').value = data.phone;
                document.getElementById('subsidiaryUserHireDate').value = data.hireDate;
                document.getElementById('subsidiaryUserStatus').value = data.status;
            }
        }

        function viewSubsidiaryUser(userId) {
            alert(`查看附属单位人员信息 - ID: ${userId}\n\n姓名: 陈老师\n邮箱: chenlaoshi@school.edu.cn\n附属单位: 市第一中学\n职位: 数学教师\n联系电话: 136****3456\n入职时间: 2020-09-01\n状态: 在职`);
        }

        function editSubsidiaryUser(userId) {
            openSubsidiaryUserModal('edit', userId);
        }

        function deleteSubsidiaryUser(userId) {
            if (confirm('确定要删除这个附属单位人员吗？此操作不可恢复。')) {
                console.log('删除附属单位人员:', userId);
                alert('附属单位人员删除成功！');
            }
        }

        function searchSubsidiaryUsers() {
            const name = document.querySelector('#subsidiary-unit-users-content .user-search-input').value;
            const unit = document.querySelectorAll('#subsidiary-unit-users-content .user-search-input')[1].value;
            const position = document.querySelectorAll('#subsidiary-unit-users-content .user-search-input')[2].value;
            const status = document.querySelectorAll('#subsidiary-unit-users-content .user-search-input')[3].value;

            console.log('搜索附属单位人员:', { name, unit, position, status });
            alert(`搜索条件：\n姓名: ${name || '全部'}\n附属单位: ${unit || '全部'}\n职位: ${position || '全部'}\n状态: ${status || '全部'}\n\n正在搜索...`);
        }

        function resetSubsidiaryUserSearch() {
            const inputs = document.querySelectorAll('#subsidiary-unit-users-content .user-search-input');
            inputs.forEach(input => {
                if (input.tagName === 'SELECT') {
                    input.selectedIndex = 0;
                } else {
                    input.value = '';
                }
            });
            alert('搜索条件已重置！');
        }

        // 更新switchModule函数以支持单位组织模块
        function switchModule(module) {
            // 移除所有活动状态
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            
            // 添加活动状态到当前点击的链接
            event.target.closest('.nav-link').classList.add('active');
            
            // 更新页面标题和面包屑
            const pageTitle = document.querySelector('.page-title');
            const breadcrumb = document.querySelector('.breadcrumb');
            
            const moduleNames = {
                'homepage': '系统首页',
                'official-business': '公务办理',
                'data-analysis': '数据分析',
                'organization': '单位组织',
                'system-management': '系统管理'
            };
            
            const breadcrumbNames = {
                'homepage': '首页 > 主页',
                'official-business': '首页 > 公务办理',
                'data-analysis': '首页 > 数据分析',
                'organization': '首页 > 单位组织',
                'system-management': '首页 > 系统管理'
            };
            
            if (moduleNames[module]) {
                pageTitle.textContent = moduleNames[module];
                breadcrumb.innerHTML = breadcrumbNames[module];
            }
            
            // 隐藏所有模块
            document.querySelector('.personal-info-module').classList.add('hidden');
            document.querySelector('.homepage-module').classList.add('hidden');
            document.querySelector('.announcement-module').classList.add('hidden');
            document.querySelector('.official-business-module').classList.remove('active');
            document.querySelector('.official-business-module').style.display = 'none';
            document.querySelector('.data-analysis-module').classList.remove('active');
            document.querySelector('.data-analysis-module').style.display = 'none';
            document.querySelector('.organization-module').classList.remove('active');
            document.querySelector('.organization-module').style.display = 'none';
            document.querySelector('.system-management-module').classList.remove('active');
            document.querySelector('.system-management-module').style.display = 'none';
            
            // 根据模块类型显示对应内容
            if (module === 'homepage') {
                document.querySelector('.personal-info-module').classList.remove('hidden');
                document.querySelector('.homepage-module').classList.remove('hidden');
                document.querySelector('.announcement-module').classList.remove('hidden');
            } else if (module === 'official-business') {
                document.querySelector('.official-business-module').classList.add('active');
                document.querySelector('.official-business-module').style.display = 'block';
            } else if (module === 'data-analysis') {
                document.querySelector('.data-analysis-module').classList.add('active');
                document.querySelector('.data-analysis-module').style.display = 'block';
            } else if (module === 'organization') {
                document.querySelector('.organization-module').classList.add('active');
                document.querySelector('.organization-module').style.display = 'block';
            } else if (module === 'system-management') {
                document.querySelector('.system-management-module').classList.add('active');
                document.querySelector('.system-management-module').style.display = 'block';
            }
            
            // 这里可以添加实际的模块切换逻辑
            console.log('切换到模块:', module);
        }

        // 打开活动管理界面
        function openActivityManagement() {
            // 移除所有活动状态
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            
            // 添加活动状态到活动管理链接
            event.target.closest('.nav-link').classList.add('active');
            
            // 跳转到活动管理页面
            window.location.href = 'activity-management.html';
        }

        // 打开志愿者管理界面
        function openVolunteerManagement() {
            // 移除所有活动状态
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            
            // 添加活动状态到志愿者管理链接
            event.target.closest('.nav-link').classList.add('active');
            
            // 跳转到志愿者管理页面
            window.location.href = 'main-volunteer-management.html';
        }

        // 打开数据大屏界面
        function openDataDashboard() {
            // 移除所有活动状态
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            
            // 添加活动状态到数据大屏链接
            event.target.closest('.nav-link').classList.add('active');
            
            // 跳转到数据大屏页面
            window.location.href = 'data-dashboard.html';
        }

        // 系统管理模块功能
        function switchSystemTab(tab) {
            // 移除所有活动状态
            document.querySelectorAll('.system-tab').forEach(item => {
                item.classList.remove('active');
            });
            event.target.classList.add('active');

            // 隐藏所有内容
            document.querySelectorAll('.system-content').forEach(content => {
                content.classList.remove('active');
            });
            
            // 显示对应内容
            if (tab === 'user-management') {
                document.getElementById('user-management-content').classList.add('active');
            } else if (tab === 'role-management') {
                document.getElementById('role-management-content').classList.add('active');
            } else if (tab === 'system-config') {
                document.getElementById('system-config-content').classList.add('active');
            } else if (tab === 'log-management') {
                document.getElementById('log-management-content').classList.add('active');
            }
        }

        // 系统用户管理功能
        function openSystemUserModal(action, userId = null) {
            alert(`系统用户管理 - ${action === 'add' ? '新增用户' : '编辑用户'}\n\n功能包括：\n- 用户基本信息管理\n- 角色分配\n- 权限设置\n- 状态管理`);
        }

        function importSystemUsers() {
            alert('批量导入系统用户\n\n支持格式：Excel (.xlsx)\n请确保文件包含以下列：\n- 用户名\n- 真实姓名\n- 邮箱\n- 角色\n- 部门');
        }

        function exportSystemUsers() {
            alert('正在导出系统用户数据...\n\n导出格式：Excel (.xlsx)\n导出范围：所有系统用户\n预计文件大小：约 1.8MB');
        }

        function resetUserPasswords() {
            if (confirm('确定要重置选中用户的密码吗？\n重置后的密码将发送到用户邮箱。')) {
                alert('密码重置操作已执行！\n\n重置用户数：4个\n已发送邮件通知用户');
            }
        }

        function searchSystemUsers() {
            const username = document.querySelector('#user-management-content .system-search-input').value;
            const realname = document.querySelectorAll('#user-management-content .system-search-input')[1].value;
            const role = document.querySelectorAll('#user-management-content .system-search-input')[2].value;
            const status = document.querySelectorAll('#user-management-content .system-search-input')[3].value;

            console.log('搜索系统用户:', { username, realname, role, status });
            alert(`搜索条件：\n用户名: ${username || '全部'}\n真实姓名: ${realname || '全部'}\n角色: ${role || '全部'}\n状态: ${status || '全部'}\n\n正在搜索...`);
        }

        function resetSystemUserSearch() {
            const inputs = document.querySelectorAll('#user-management-content .system-search-input');
            inputs.forEach(input => {
                if (input.tagName === 'SELECT') {
                    input.selectedIndex = 0;
                } else {
                    input.value = '';
                }
            });
            alert('搜索条件已重置！');
        }

        function viewSystemUser(userId) {
            alert(`查看系统用户信息 - ID: ${userId}\n\n用户名: zhangsan\n真实姓名: 张三\n邮箱: zhangsan@gov.cn\n角色: 超级管理员\n部门: 系统管理部\n状态: 启用\n最后登录: 2024-01-15 14:30\n创建时间: 2023-01-01`);
        }

        function editSystemUser(userId) {
            openSystemUserModal('edit', userId);
        }

        function deleteSystemUser(userId) {
            if (confirm('确定要删除这个系统用户吗？此操作不可恢复。')) {
                console.log('删除系统用户:', userId);
                alert('系统用户删除成功！');
            }
        }

        // 角色管理功能
        function openRoleModal(action, roleId = null) {
            alert(`角色管理 - ${action === 'add' ? '新增角色' : '编辑角色'}\n\n功能包括：\n- 角色基本信息设置\n- 权限分配\n- 用户关联管理`);
        }

        function copyRole() {
            alert('复制角色功能\n\n请选择要复制的角色，系统将创建一个新的角色副本，\n您可以在此基础上修改角色名称和权限设置。');
        }

        function exportRoles() {
            alert('正在导出角色数据...\n\n导出格式：Excel (.xlsx)\n导出范围：所有角色及权限配置\n预计文件大小：约 0.8MB');
        }

        function editRole(roleId) {
            openRoleModal('edit', roleId);
        }

        function deleteRole(roleId) {
            if (confirm('确定要删除这个角色吗？\n删除角色将影响所有使用该角色的用户。')) {
                console.log('删除角色:', roleId);
                alert('角色删除成功！\n\n已自动将相关用户角色调整为"普通用户"');
            }
        }

        // 系统配置功能
        function editSystemInfo() {
            alert('编辑系统信息\n\n可配置项：\n- 系统名称\n- 系统版本\n- 系统管理员\n- 系统状态');
        }

        function editSecurityConfig() {
            alert('编辑安全配置\n\n可配置项：\n- 密码策略\n- 登录策略\n- 会话管理\n- 安全审计');
        }

        function editEmailConfig() {
            alert('编辑邮件配置\n\n可配置项：\n- SMTP服务器设置\n- 邮件模板\n- 发送策略\n- 邮件状态');
        }

        function editBackupConfig() {
            alert('编辑备份配置\n\n可配置项：\n- 备份策略\n- 备份频率\n- 保留策略\n- 备份位置');
        }

        function editDatabaseConfig() {
            alert('编辑数据库配置\n\n可配置项：\n- 数据库连接参数\n- 连接池设置\n- 查询优化\n- 性能监控');
        }

        function editCacheConfig() {
            alert('编辑缓存配置\n\n可配置项：\n- 缓存策略\n- 缓存大小\n- 过期时间\n- 缓存清理');
        }

        // 日志管理功能
        function exportLogs() {
            alert('正在导出日志数据...\n\n导出格式：Excel (.xlsx)\n导出范围：当前筛选条件下的所有日志\n预计文件大小：约 3.2MB');
        }

        function clearLogs() {
            if (confirm('确定要清理日志吗？\n此操作将删除30天前的所有日志记录。')) {
                alert('日志清理操作已执行！\n\n已清理日志条数：1,234条\n释放存储空间：156MB');
            }
        }

        function logAnalysis() {
            alert('日志分析报告\n\n分析结果：\n- 总访问量：15,678次\n- 成功登录：14,892次\n- 失败登录：786次\n- 异常操作：23次\n- 系统错误：5次\n\n建议：\n- 加强密码安全策略\n- 监控异常IP访问');
        }

        function searchLogs() {
            const logType = document.querySelector('#log-management-content .log-filter-input').value;
            const user = document.querySelectorAll('#log-management-content .log-filter-input')[1].value;
            const startTime = document.querySelectorAll('#log-management-content .log-filter-input')[2].value;
            const endTime = document.querySelectorAll('#log-management-content .log-filter-input')[3].value;

            console.log('搜索日志:', { logType, user, startTime, endTime });
            alert(`搜索条件：\n日志类型: ${logType || '全部'}\n用户: ${user || '全部'}\n开始时间: ${startTime || '全部'}\n结束时间: ${endTime || '全部'}\n\n正在搜索...`);
        }

        function resetLogSearch() {
            const inputs = document.querySelectorAll('#log-management-content .log-filter-input');
            inputs.forEach(input => {
                if (input.tagName === 'SELECT') {
                    input.selectedIndex = 0;
                } else {
                    input.value = '';
                }
            });
            alert('搜索条件已重置！');
        }

        function viewLogDetail(logId) {
            alert(`查看日志详情 - ID: ${logId}\n\n时间: 2024-01-15 14:30:25\n用户: zhangsan\n操作: 用户登录\nIP地址: 192.168.1.100\n状态: 成功\n用户代理: Mozilla/5.0 (Windows NT 10.0; Win64; x64)\n会话ID: SESS_123456789\n详细信息: 用户通过用户名密码成功登录系统`);
        }

        // 登录状态检查
        function checkLoginStatus() {
            const isLoggedIn = localStorage.getItem('isLoggedIn');
            const currentUser = localStorage.getItem('currentUser');
            
            if (isLoggedIn !== 'true' || !currentUser) {
                // 未登录，跳转到登录页面
                window.location.href = 'login.html';
                return false;
            }
            
            // 更新用户信息显示
            updateUserInfo(currentUser);
            return true;
        }

        // 更新用户信息显示
        function updateUserInfo(username) {
            const userNameElement = document.getElementById('current-user-name');
            const userRoleElement = document.getElementById('current-user-role');
            
            // 根据用户名设置显示名称和角色
            const userInfo = {
                'admin': { name: '系统管理员', role: '超级管理员' },
                'user': { name: '普通用户', role: '普通用户' },
                'zhangsan': { name: '张三', role: '管理员' },
                'lisi': { name: '李四', role: '部门主管' }
            };
            
            const info = userInfo[username] || { name: username, role: '用户' };
            
            userNameElement.textContent = info.name;
            userRoleElement.textContent = info.role;
        }

        // 退出登录
        function logout() {
            if (confirm('确定要退出登录吗？')) {
                // 清除登录状态
                localStorage.removeItem('isLoggedIn');
                localStorage.removeItem('currentUser');
                localStorage.removeItem('loginTime');
                
                // 跳转到登录页面
                window.location.href = 'login.html';
            }
        }

        // 页面加载动画和登录检查
        window.addEventListener('load', function() {
            // 首先检查登录状态
            if (!checkLoginStatus()) {
                return;
            }
            
            const elements = document.querySelectorAll('.personal-info-module, .homepage-module, .announcement-module, .content-header');
            elements.forEach((element, index) => {
                element.style.opacity = '0';
                element.style.transform = 'translateY(30px)';
                
                setTimeout(() => {
                    element.style.transition = 'all 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }, index * 200);
            });
        });
    </script>
</body>
</html>
